Javascript 使用jquery cookie插件附加到此

我很难让代码只附加到被点击的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>

这是另一段

清单项目1
清单项目2
清单项目3
附加列表项
清除Cookies
展示饼干
清单项目1
清单项目2
清单项目3
附加列表项
清除Cookies
展示饼干
清单项目1
清单项目2
清单项目3
附加列表项
清除Cookies
展示饼干
清单项目1
清单项目2
清单项目3
附加列表项
清除Cookies
展示饼干

这是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"));
});

$（“ol”）.append（$.cookie（“listItem”）；
$（“.btn2”）。单击（函数（）{
var newLi=$（“
附加项
”）。附加到（“ol”）；
$.cookie（“listItem”），（（$.cookie（“listItem”）？$.cookie（“listItem”）：“”）+newLi.clone（）.wrap（“”）.parent（）.html（））；
});
$（“.btn3”）。单击（函数（）{
$.removeCookie（'listItem'）；
$（“li.new ol”）.remove（）；
});
$（“.btn4”）。单击（函数（）{
警报（$.cookie（“listItem”）；
});

我想这就是你想要的：

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

重复的

id

属性无效。将选择器改为“类”，然后

$（此）

将显示您单击的特定按钮

编辑实际上，您需要更多的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

属性必须是唯一的。将其更改为classes可以解决我的问题吗？这将使其对初学者有效。好的，我将其更改为classes，所有这些都将具有相同的类名，因为它是rails站点上的索引页，当用户添加新页面时会自动生成。我想我遇到的问题是我在我的提琴上刷新页面，它会附加到所有ol列表中……我需要为每个列表创建一个唯一的cookie这是新的提琴是的，看起来你需要单独的cookie。而且，您的附件太多了。您有

var newLi=…appendTo（“ol”）

然后是

。append（newLi）

。您知道如何为具有相同类名和相同事件句柄的每个元素创建单独的cookie吗？您似乎需要解决识别和区分列表的问题。如果您使用for循环来最初写出html，那么您将拥有一个自然索引。

<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);
});