javascript - 如何根据点击切换图标？

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");
    });

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