javascript - 使用 jquery cookie 插件附加到此

Question

我无法让代码仅附加到单击的 ol 上工作......现在它附加到所有 ol 上

这是我正在尝试使用的 fiddle http://jsfiddle.net/Xg36L/6/

这是 html

<p>This is another paragraph.</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button class="btn2">Append list item</button>
<button class="btn3">Clear Cookies</button>
<button class="btn4">Show Cookies</button>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button class="btn2">Append list item</button>
<button class="btn3">Clear Cookies</button>
<button class="btn4">Show Cookies</button>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button class="btn2">Append list item</button>
<button class="btn3">Clear Cookies</button>
<button class="btn4">Show Cookies</button>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button class="btn2">Append list item</button>
<button class="btn3">Clear Cookies</button>
<button class="btn4">Show Cookies</button>

这里是js

$("ol").append($.cookie("listItem"));
$(".btn2").click(function () {
    var newLi = $("<li class='new'>Appended item</li>").appendTo("ol");
    $.cookie("listItem", (($.cookie("listItem") ? $.cookie("listItem") : '') + newLi.clone().wrap('<div />').parent().html()));
});
$(".btn3").click(function () {
    $.removeCookie('listItem');
    $("li.new ol").remove();
});
$(".btn4").click(function () {
    alert($.cookie("listItem"));
});

Answer 1

我想这就是你想要的:

$(".append-btn").on("click", function() {
   var newLi = ...
   $(this).siblings("ol").append(newLi);
});

重复的 id 属性无效。将您的选择器更改为类，然后 $(this) 将为您提供您单击的特定按钮。

编辑实际上，您需要更多的 html 标记来为您的 JavaScript 提供一些关于插入位置的提示。

一种选择是将列表和按钮集包装在 div 或 span 中。然后上面的代码就可以工作了。

<div>
    <p></p>
    <ol>...</ol>
    <button class="append-btn">Append</button>
    <button class="clear-btn">Clear</button>
    <button class="show-btn">Show</button>
</div>

另一个选择是为您的列表提供唯一的 id。

<ol id="list1">...</ol>
<button class="append-btn" data-id="1">Append</button>

$(".append-btn").on("click", function() {
    var id = $(this).data("id");
    $("#list" + id).append(newLi);
});