0

我有一个可排序的 JQuery，每个项目都包含一个按钮。在页面顶部，我有一个添加按钮，用于将项目添加到可排序中。我正在尝试对每个可排序的按钮进行编程，以将特定项目上的字符串替换为自动完成中当前用户输入的值（也在页面顶部）。这是我的代码：

$(".addButton").click(function(e) {
e.preventDefault();
// set var item to be the string inputted by the user
var item = $("input[name='inputItem']").val(); //where 'inputItem' is the name of the <input>
// parses input string, splitting at commas into liArray containing substrings as elements
var liArray = item.split(", ");
// for loop to add each brew to the sortable list (length-1 because last element in array is empty string)
for (var i = 0; i < liArray.length-1; i++) {
    // sets var $li to the string in the ith index of liArray
    var $li = $("<li class='ui-state-default'/>").text(liArray[i]).append('<button class="replaceButton">Replace</button>');

    // adds var $li to gui
    $("#sortable").append($li);
};

$("#sortable").sort();

// refreshes the page so var $li shows up
$("#sortable").sortable("refresh");

});

现在我添加的每个项目都有一个带有 class = "replaceButton" 的按钮，我想我可以在我的 .js 中声明如下内容：

$(".replaceButton").click(function() {
    // set var item to be the string inputted by the user
    var item = $("input[name='inputItem']").val();  //where 'inputItem' is the name of the <input>
    // I DON'T KNOW WHAT TO DO HERE
});

我不知道从那里去哪里，因为我不知道如何访问特定项目的字符串。我会用“这个”吗？另外，我删除了特定项目并在其位置创建了一个新项目，而不是仅仅替换字符串会更容易吗？感谢您的任何建议或答案！

4

1 回答 1

0

因为您知道您的按钮是您的一部分，所以li您可以像这样访问文本：

// mind the dynamic event binding!
$('#sortable').on('click', ".replaceButton", function(e) {
    e.preventDefault();

    var item = $("input[name='inputItem']").val();

    $(this).parent()
          .text(item)
          .append( $(this).clone() );
});

当您想保留它时，您将不得不附加您的 replaceButton 的另一个实例。
而且因为您是动态添加按钮的，所以请注意事件绑定中的更改。我将点击事件绑定到一个持久的容器，并动态绑定到所有实例，.replaceButton即使它们还不存在。

于 2013-04-15T18:59:37.127 回答