我有3个切换图标here

我想更改图标,使其在点击时像这样enter image description here开启

我为此写了一个jQuery,但仅适用于1st icon。



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>

最佳答案

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

您可以尝试基于HTML替代使用选择器,然后应能进行以下操作:

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


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

10-05 21:01
查看更多