我的困境的演示 here
假设我有以下 html:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="main" id="thingSection">
<h1>
Test Header
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content1">
Some content
</div>
</div>
<hr />
<div class="main" id="thingSection1">
<h1>
Another Test
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content2">
Some content
</div>
</div>
<hr>
<div class="main" id="thingSection2">
<h1>
Another test, you say?
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content3">
Some content
</div>
</div>
</body>
</html>
我使用以下 jquery 将 FontAwesome 中的 toggle 图标从关闭更改为打开:
$(function() {
$('.btn-icon').click(function() {
if ($(this).find($(".fa")).hasClass('fa-toggle-off')) {
$("i.fa-toggle-off").toggleClass('fa-toggle-on');
} else {
$("i.fa-toggle-on").toggleClass('fa-toggle-off');
}
});
});
当我单击按钮来切换图标时，它会按预期工作，即它会更改页面上的所有按钮。但是，我想动态确定按下了哪个按钮，然后根据开关的位置更改子 div 的内容。
我希望避免对每个按钮的 id 进行硬编码，以避免脚本中出现大量 if/else 语句，每次我添加新按钮或新部分时，这些语句都必须更新。也就是说，我想动态检测哪个按钮被按下，并且只影响该按钮及其子按钮。
我注意到 console.log(this) 仅生成已按下的特定按钮的 HTML，而不是所有按钮。
我是jquery的新手。我还没有找到这个问题的解决方案，我觉得必须有一种方法可以动态地做到这一点，而无需硬编码 ID。
编辑:我已经(部分)完成了我想要使用以下代码执行的操作:
$(function() {
$('.btn-icon').click(function() {
var t = $(this).find('.is-toggle');
if (t.hasClass('fa-toggle-off')) {
t.addClass('fa-toggle-on');
t.removeClass('fa-toggle-off');
}
else {
t.addClass('fa-toggle-off');
t.removeClass('fa-toggle-on');
}
});
});
看起来我只是不明白 $(this) 到底是什么(:
最佳答案
您所需要的只是 $(this) 来选择触发事件的元素。从那里您可以选择您想要的 div。
编辑:这是代码中的样子，我从你的 fiddle 中提取了它并对其进行了编辑
$(function() {
$('.btn-icon').click(function() {
$(this).children('.fa-toggle-off, .fa-toggle-on').toggleClass('fa-toggle-on fa-toggle-off');
});
});
关于javascript - 用jquery动态判断某个类的哪个按钮被点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59416269/