如何根据点击切换图标?

时间:2018-06-28 11:35:00

标签: javascript html css

我有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>

4 个答案:

答案 0 :(得分:6)

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

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

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

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

答案 1 :(得分:0)

它仅对第一个按钮有效,因为您正在复制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>

答案 2 :(得分:0)

您只能使用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>

答案 3 :(得分:0)

尝试一下:-

拥有多个具有相同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>