Javascript 动态确定使用jquery单击了特定类的哪个按钮_Javascript_Jquery_Html

Javascript 动态确定使用jquery单击了特定类的哪个按钮

javascript jquery html

Javascript 动态确定使用jquery单击了特定类的哪个按钮,javascript,jquery,html,Javascript,Jquery,Html,我困境的一个演示假设我有以下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"

我困境的一个演示

假设我有以下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>

当我单击按钮切换图标时，它会按预期工作，即更改页面上的所有按钮。但是，我想动态确定按下了哪个按钮，然后根据开关的位置更改子

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

编辑：这是代码中可能出现的情况，我从你的小提琴中取出这个并编辑了它

$(function() {
  $('.btn-icon').click(function() {
    $(this).children('.fa-toggle-off, .fa-toggle-on').toggleClass('fa-toggle-on fa-toggle-off');
  });
});

抱歉，我不能100%确定您的确切意思，或者它在代码中的外观。我已经在我想要切换的图标中添加了一个类，名为

is toggle

（我知道这很有创意）。因此，现在我应该能够更容易地确定我想要更改的是哪个

。现在我有了

var toggle=$（this）。find（$（'.is toggle'））

但这并不能产生很好的效果谢谢你！我终于能够完成我想做的一切（通过启动动画！）。

$(function() {
  $('.btn-icon').click(function() {
    $(this).children('.fa-toggle-off, .fa-toggle-on').toggleClass('fa-toggle-on fa-toggle-off');
  });
});