使用jquery動態確定特定類的哪個按鈕被點擊

Question

我的困境的演示在這里

假設我有以下 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 將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');
    }
  });
});

當我單擊按鈕切換圖標時，它按預期工作，即它更改了頁面上的所有按鈕。 但是，我想動態確定按下了哪個按鈕，然后根據開關的位置更改子div的內容。

我想避免為每個按鈕硬編碼 id，以避免腳本中的大量if/else語句必須在每次我添加新按鈕或新部分時更新。 也就是說，我想動態檢測哪個按鈕被按下，並且只影響那個按鈕和它的孩子。

我注意到console.log(this)只生成被按下的特定按鈕的 HTML，而不是所有按鈕。

我是 jquery 的新手。 我一直沒能找到解決這個問題呢，我覺得必須有一個辦法做到這一點動態沒有硬編碼標識。

編輯：我已經（部分）完成了我想要用以下代碼做的事情：

$(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)到底是什么 (:

Answer 1

您只需要$(this)來選擇觸發事件的元素。 從那里你可以選擇你想要的 div。

編輯：這是代碼中的樣子，我從你的小提琴中取出並編輯它

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