Question

我无法让代码工作，只附加了被点击的ol ....现在它附加到所有ol的

继承人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);
});

使用jquery cookie插件附加到此

1 个答案: