如何根据点击切换图标？

Question

我在这里有3个切换图标

我想更改图标以在点击这样的时候切换到此处输入图像描述

我写了一个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".