我有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"
元素。