Question

我有3个切换图标here

我想更改图标以使其在点击时enter image description here

时打开

我为此编写了一个jquery，但它仅适用于第一个图标。

function settingsClicked() {
  $(document).ready(function() {
    $('#settings-btn').click(function() {
      $(this).toggleClass("fa-toggle-off fa-toggle-on");
    });
  });
}

settings {
  padding: 10px;
}

.settings p {
  display: inline;
  font-size: 22px;
  color: #1e698d;
  font-family: 'Dosis', sans-serif;
  font-weight: bold;
}

.settings i {
  font-size: 30px;
  padding-left: 10px;
}

.fa-toggle-on {
  color: green;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
  <form>
    <fieldset class="dashboard-border">
      <legend class="legend-border">Settings</legend>
      <div class="settings">
        <p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
      </div>
      <div class="settings">
        <p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
      </div>
      <div class="settings">
        <p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
      </div>
    </fieldset>
  </form>
</div>

Answer 1

问题是您不能对多个元素使用相同的id。因此，首先，请删除这些重复的ID。

您可以尝试使用替代选择器，根据您的HTML，以下代码应该起作用：

    $('div.settings i').click(function () {
        $(this).toggleClass("fa-toggle-off fa-toggle-on");
    });

这将选择在具有i的任何div中找到的class="settings"个元素。

Answer 2

它仅对第一个按钮有效，因为您正在复制ID-每个ID必须唯一。我只是在ID的末尾附加了一个数字，以确保ID是唯一的。请注意，您将需要更改点击处理程序的选择器，并且由于存在多个元素，因此最好使用一个类。

 <div class="dashboard">
        <form>
            <fieldset class="dashboard-border">
                <legend class="legend-border">Settings</legend>
                <div class="settings">
                    <p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn1"></i>
                </div>
                <div class="settings">
                    <p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn2"></i>           
                </div>
                <div class="settings">
                    <p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn3"></i>
                </div>
            </fieldset>
        </form>    
    </div>

Answer 3

您只能使用id一次。

如果要为每个按钮切换它，可以执行以下操作：

$(document).ready(function() {
            $('.settings-btn').click(function () {
                $(this).toggleClass("fa-toggle-off fa-toggle-on");
            });
    });

settings {
  padding: 10px;
}

.settings p {
  display: inline;
  font-size: 22px;
  color: #1e698d;
  font-family: 'Dosis', sans-serif;
  font-weight: bold;
}

.settings i {
  font-size: 30px;
  padding-left: 10px;
}

.fa-toggle-on {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
  <form>
    <fieldset class="dashboard-border">
      <legend class="legend-border">Settings</legend>
      <div class="settings">
        <p>Settings 1 : </p> <i class="fas fa-toggle-off settings-btn"></i>
      </div>
      <div class="settings">
        <p>Settings 2 : </p> <i class="fas fa-toggle-off settings-btn"></i>
      </div>
      <div class="settings">
        <p>Settings 3 : </p> <i class="fas fa-toggle-off settings-btn"></i>
      </div>
    </fieldset>
  </form>
</div>

Answer 4

尝试一下：-

拥有多个具有相同ID的标签的无效方法。

$(document).ready(function() {
       $('div.settings i').click(function () {
         $(this).toggleClass("fa-toggle-off fa-toggle-on");
    });
      });

    settings {
      padding: 10px;
    }

    .settings p {
      display: inline;
      font-size: 22px;
      color: #1e698d;
      font-family: 'Dosis', sans-serif;
      font-weight: bold;
    }

    .settings i {
      font-size: 30px;
      padding-left: 10px;
    }

    .fa-toggle-on {
      color: green;
    }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="dashboard">
      <form>
        <fieldset class="dashboard-border">
          <legend class="legend-border">Settings</legend>
          <div class="settings">
            <p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
          </div>
          <div class="settings">
            <p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
          </div>
          <div class="settings">
            <p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
          </div>
        </fieldset>
      </form>
    </div>

如何根据点击切换图标？

4 个答案: