1

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

这是我试图与 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"));
});
4

1 回答 1

0

我认为这就是你想要的：

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

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

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

一种选择是将您的列表和按钮集包装在 adiv或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您的列表提供唯一的 s。

<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);
});
于 2013-05-17T00:12:17.233 回答