我无法让代码仅附加到单击的 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"));
});
最佳答案
我想这就是你想要的:
$(".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);
});
关于javascript - 使用 jquery cookie 插件附加到此,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16598304/