使用jquery动态确定特定类的哪个按钮被点击

Question

A demo of my dilemma here我的困境的演示在这里

Let's say I have the following 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">

  <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>

I am using the following jquery to change the toggle icon from FontAwesome from off to on:我正在使用以下 jquery 将toggle图标从 FontAwesome 从关闭更改为开启：

$(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');
    }
  });
});

When I click the button to toggle the icon, it works as expected, ie it changes all of the buttons on the page.当我单击按钮切换图标时，它按预期工作，即它更改了页面上的所有按钮。 However, I would like to dynamically determine which button has been pressed, and then change the content of a child div based on the position of the switch.但是，我想动态确定按下了哪个按钮，然后根据开关的位置更改子div的内容。

I want to avoid hardcoding id's for each button to avoid a ton of if/else statements in the script that must be updated each time I, say, add a new button or a new section.我想避免为每个按钮硬编码 id，以避免脚本中的大量if/else语句必须在每次我添加新按钮或新部分时更新。 That is to say, I want to dynamically detect which button has been pressed, and affect only that button and its children.也就是说，我想动态检测哪个按钮被按下，并且只影响那个按钮和它的孩子。

I've noticed that console.log(this) yields only the HTML for the particular button that has been pressed, not all of the buttons.我注意到console.log(this)只生成被按下的特定按钮的 HTML，而不是所有按钮。

I'm a novice with jquery.我是 jquery 的新手。 I haven't been able to find a solution to this problem yet, and I feel like there has to be a way to do this dynamically without hardcoding IDs.我一直没能找到解决这个问题呢，我觉得必须有一个办法做到这一点动态没有硬编码标识。

EDIT : I've accomplished (partially) what I want to do with the following code:编辑：我已经（部分）完成了我想要用以下代码做的事情：

$(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');
        }
    });

});

Looks like I just didn't understand what exactly $(this) was (:看起来我只是不明白$(this)到底是什么 (:

Answer 1

All you need is $(this) that selects the element that triggered the event.您只需要$(this)来选择触发事件的元素。 From there you can select down to the div you want.从那里你可以选择你想要的 div。

EDIT: Here is how that might look in code, I pulled this from your fiddle and edited it编辑：这是代码中的样子，我从你的小提琴中取出并编辑它

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

使用jquery动态确定特定类的哪个按钮被点击

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-12-19 20:07:55

使用jquery动态确定特定类的哪个按钮被点击

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-12-19 20:07:55

解决方案1
3 已采纳 2019-12-19 20:07:55