按钮如何执行 jQuery 操作

Question

我有这样的HTMl：

<script>
$(document).ready(function() {
$(".nav").attr("id", function(i) {
return "cat" + i;
});
$("ul.nav").append("<li class='ss'><button class='icon'>exp</button></li>");
$("button.icon").attr("id", function(a) {
return "butn" + a;
});
$("button").click(function() {
$('[id^=cat]').toggleClass("responsive");
});
});    
</script>

和

<ul class="nav">
<li class="tab active has-icon">
<a href="#">
<span>ep0</span>
</a>
</li>
<li class="tab has-icon">
<a href="#">
<span>ep1</span>
</a>
</li>
</ul>

<ul class="nav">
<li class="tab active has-icon">
<a href="#">
<span>ep3</span>
</a>
</li>
<li class="tab has-icon">
<a href="#">
<span>ep4</span>
</a>
</li>
</ul>

目前，单击按钮时，所有class="nav"都是+"响应式"。 我希望当单击<butn..>时，它只是在那里执行一个操作。 但是不知道该怎么办

Answer 1

$('[id^=cat]')将选择ID以cat开头的所有元素。

你需要更具体。一种方法是使用单击的按钮本身来查找祖先ul。

在click()事件处理程序中，可以使用$(this)来引用按钮。这意味着为了找到祖先ul你可以这样做：

$(this).closest('ul').toggleClass("responsive");

$(document).ready(function() {
$(".nav").attr("id", function(i) {
return "cat" + i;
});
$("ul.nav").append("<li class='ss'><button class='icon'>exp</button></li>");
$("button.icon").attr("id", function(a) {
return "butn" + a;
});
$("button").click(function() {
$(this).closest('ul').toggleClass("responsive");
});
});

.responsive {
background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
<li class="tab active has-icon">
<a href="#">
<span>ep0</span>
</a>
</li>
<li class="tab has-icon">
<a href="#">
<span>ep1</span>
</a>
</li>
</ul>
<ul class="nav">
<li class="tab active has-icon">
<a href="#">
<span>ep3</span>
</a>
</li>
<li class="tab has-icon">
<a href="#">
<span>ep4</span>
</a>
</li>
</ul>