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