JQuery 切换图标与各种不同的图标问题
JQuery Toggle icon with a variety of different icons issue
我目前正在尝试设置一个带有图标切换的菜单,因此当单击一个图标时,它会变成一个十字,然后当该十字被单击时,它又会变回原来的样子。我已经做到这一点了,但是当我单击一个新图像时,我希望旧图标重置并将十字应用于新图标。
这是我的进度:
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed faq-links">
<i id="icon" class="fa fa-info-circle fa-3x"></i>
</a>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading13">
<a class="collapsed faq-links">
<i id="icon" class="fa fa-heartbeat fa-3x"></i>
</a>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<a class="collapsed faq-links" >
<i id="icon" class="fa fa-comments fa-3x"></i>
</a>
</div>
</div>
Javascript:
$('.faq-links').click(function(){
var collapsed=$(this).find('i').hasClass('fa-info-circle');
$('.faq-links').find('i').removeClass('fa-times');
$('.faq-links').find('i').addClass('fa-info-circle');
if(collapsed)
$(this).find('i').toggleClass('fa-info-circle fa-3x fa-times fa-3x')
});
我已经设置了一个 JSFiddle 来展示它的工作https://jsfiddle.net/BenjiBaird/yycf2jb8/1/
因此,当我单击信息圆圈时,会应用十字,而当我单击另一个时,十字会被删除。我该如何着手将其应用于每个图标。
任何帮助将不胜感激,希望我说清楚了。
如果您将数据属性添加到具有特定图标 class 名称的锚标签,就像这样
<a class="collapsed faq-links" data-icon-name="fa-info-circle">
<i id="icon" class="fa fa-info-circle fa-3x"></i>
</a>
您可以使用该属性在 'fa-times' 和原始
之间切换图标
看看下面的代码和 JSFiddle 看看它是如何工作的。代码中也存在效率低下的问题,即不断使用 .find('i')
,但我会留给您来解决这个问题。
$('.faq-links').click(function() {
if ($(this).find('i').hasClass('fa-times')) { //then change back to the original one
$(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
} else {
$('.faq-links').each(function(){ //Remove the cross from all other icons
if($(this).find('i').hasClass('fa-times')) {
$(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
}
});
$(this).find('i').addClass('fa-times').removeClass($(this).data('icon-name'));
}
});
Fiddle是here
我会从所有按钮上删除 "cross" 图标 类,然后将所有按钮重置为其默认图标,最后为当前按钮绘制 "cross"(如果需要)。像这样:
$('.faq-links').click(function(){
var notCollapsed = $(this).find('i').hasClass('fa-times');
//Remove crosses from all buttons
$('.faq-links').find('i').removeClass('fa-times');
//Reset the default icon for each button
$('.faq-links:eq(0)').find('i').addClass('fa-info-circle');
$('.faq-links:eq(1)').find('i').addClass('fa-heartbeat');
$('.faq-links:eq(2)').find('i').addClass('fa-comments');
//Draw the cross if needed
if(!notCollapsed) $(this).find('i').attr("class",'fa fa-times fa-3x');
});
查看你的更新fiddlehttps://jsfiddle.net/8odoros/yycf2jb8/10/
如果你有办法确保 class fa-times 优先于 fa-heartbeat、fa-info-circle 和 fa-comments classes 这个简单的代码就可以工作就好了。
$('.faq-links').click(function() {
var blockI = $(this).find('i');
if(blockI.hasClass('fa-times')) {
// remove fa-times class if the element already has it
blockI.removeClass('fa-times');
}
else {
// clean the classes from other elements that might have it
$('.faq-links i').removeClass('fa-times');
// adds it on the clicked element
blockI.addClass('fa-times');
}
});
您可以在以后的 css 文件或样式块 and/or 中重新定义 class fa-times 使用更具体的选择器重新定义 class 以便 fa-时代风格 "overrides" 其他 class 是。这对我来说是最好的,因为你不需要和其他 classes 混在一起。您可以修改链接的顺序或添加新闻链接,脚本仍然有效。
HTML:
<i id="icon" class="fa fa-heartbeat fa-3x" data-icon="fa-heartbeat"></i>
关于HTML:
为了存储图标名称,最好的方法是使用data-attributes。
简单易懂+你以后改也没问题。确保只对一个 DOM Element
使用 id
属性,对多个元素使用 class
属性。
JS:
// jQuery safety
(function($) {
// DOM ready
$(function() {
// icons
var $icons = $('.faq-links');
$icons.on('click', function(e) {
// variables
var $this = $(this);
var $icon = $this.find('i');
// iconName taken from data-icon attribute
var iconName = $icon.data('icon');
// close icon
var closeIconName = 'fa-times';
// prevent default browser behaviour, just in case
e.preventDefault();
// handle state
if ($icon.hasClass(closeIconName)) {
$icon.removeClass(closeIconName).addClass(iconName);
} else {
$icon.addClass(closeIconName).removeClass(iconName);
};
});
});
})(jQuery);
关于 JS:
我相信干净的代码编写。越干净越好——在你的编码冒险中坚持这一点。
首先,我们使用 $icons
- 我们拥有的每个图标。
我们正在等待 click
事件。
单击其中一个 $icons
后,我们将 $this
设置为单击的图标。我们还将 $icon
设置为单击图标内的 <i></i>
元素,只是为了更清晰的代码。
iconName
相当于图标的data-attribute,方便后续步骤使用。
现在我们有 // handle state
部分。很容易理解,如果$icon
有class,等于closeIconName
(本例为叉号),则为'active'。所以一旦这个 'active' 图标被点击,我们移除 'active' 状态,这意味着,我们移除 closeIconName
class 并添加 iconName
这是默认图标名称(取自数据属性)。如果图标不是 'active',我们删除图标并添加 closeIconName
图标。
注意:没有数据属性的图标不会简单地变为 fa-close 图标。
编辑:这里是 JSFiddle:https://jsfiddle.net/0fy2po3b/1/
我目前正在尝试设置一个带有图标切换的菜单,因此当单击一个图标时,它会变成一个十字,然后当该十字被单击时,它又会变回原来的样子。我已经做到这一点了,但是当我单击一个新图像时,我希望旧图标重置并将十字应用于新图标。
这是我的进度:
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed faq-links">
<i id="icon" class="fa fa-info-circle fa-3x"></i>
</a>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading13">
<a class="collapsed faq-links">
<i id="icon" class="fa fa-heartbeat fa-3x"></i>
</a>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<a class="collapsed faq-links" >
<i id="icon" class="fa fa-comments fa-3x"></i>
</a>
</div>
</div>
Javascript:
$('.faq-links').click(function(){
var collapsed=$(this).find('i').hasClass('fa-info-circle');
$('.faq-links').find('i').removeClass('fa-times');
$('.faq-links').find('i').addClass('fa-info-circle');
if(collapsed)
$(this).find('i').toggleClass('fa-info-circle fa-3x fa-times fa-3x')
});
我已经设置了一个 JSFiddle 来展示它的工作https://jsfiddle.net/BenjiBaird/yycf2jb8/1/
因此,当我单击信息圆圈时,会应用十字,而当我单击另一个时,十字会被删除。我该如何着手将其应用于每个图标。
任何帮助将不胜感激,希望我说清楚了。
如果您将数据属性添加到具有特定图标 class 名称的锚标签,就像这样
<a class="collapsed faq-links" data-icon-name="fa-info-circle">
<i id="icon" class="fa fa-info-circle fa-3x"></i>
</a>
您可以使用该属性在 'fa-times' 和原始
之间切换图标看看下面的代码和 JSFiddle 看看它是如何工作的。代码中也存在效率低下的问题,即不断使用 .find('i')
,但我会留给您来解决这个问题。
$('.faq-links').click(function() {
if ($(this).find('i').hasClass('fa-times')) { //then change back to the original one
$(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
} else {
$('.faq-links').each(function(){ //Remove the cross from all other icons
if($(this).find('i').hasClass('fa-times')) {
$(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
}
});
$(this).find('i').addClass('fa-times').removeClass($(this).data('icon-name'));
}
});
Fiddle是here
我会从所有按钮上删除 "cross" 图标 类,然后将所有按钮重置为其默认图标,最后为当前按钮绘制 "cross"(如果需要)。像这样:
$('.faq-links').click(function(){
var notCollapsed = $(this).find('i').hasClass('fa-times');
//Remove crosses from all buttons
$('.faq-links').find('i').removeClass('fa-times');
//Reset the default icon for each button
$('.faq-links:eq(0)').find('i').addClass('fa-info-circle');
$('.faq-links:eq(1)').find('i').addClass('fa-heartbeat');
$('.faq-links:eq(2)').find('i').addClass('fa-comments');
//Draw the cross if needed
if(!notCollapsed) $(this).find('i').attr("class",'fa fa-times fa-3x');
});
查看你的更新fiddlehttps://jsfiddle.net/8odoros/yycf2jb8/10/
如果你有办法确保 class fa-times 优先于 fa-heartbeat、fa-info-circle 和 fa-comments classes 这个简单的代码就可以工作就好了。
$('.faq-links').click(function() {
var blockI = $(this).find('i');
if(blockI.hasClass('fa-times')) {
// remove fa-times class if the element already has it
blockI.removeClass('fa-times');
}
else {
// clean the classes from other elements that might have it
$('.faq-links i').removeClass('fa-times');
// adds it on the clicked element
blockI.addClass('fa-times');
}
});
您可以在以后的 css 文件或样式块 and/or 中重新定义 class fa-times 使用更具体的选择器重新定义 class 以便 fa-时代风格 "overrides" 其他 class 是。这对我来说是最好的,因为你不需要和其他 classes 混在一起。您可以修改链接的顺序或添加新闻链接,脚本仍然有效。
HTML:
<i id="icon" class="fa fa-heartbeat fa-3x" data-icon="fa-heartbeat"></i>
关于HTML:
为了存储图标名称,最好的方法是使用data-attributes。
简单易懂+你以后改也没问题。确保只对一个 DOM Element
使用 id
属性,对多个元素使用 class
属性。
JS:
// jQuery safety
(function($) {
// DOM ready
$(function() {
// icons
var $icons = $('.faq-links');
$icons.on('click', function(e) {
// variables
var $this = $(this);
var $icon = $this.find('i');
// iconName taken from data-icon attribute
var iconName = $icon.data('icon');
// close icon
var closeIconName = 'fa-times';
// prevent default browser behaviour, just in case
e.preventDefault();
// handle state
if ($icon.hasClass(closeIconName)) {
$icon.removeClass(closeIconName).addClass(iconName);
} else {
$icon.addClass(closeIconName).removeClass(iconName);
};
});
});
})(jQuery);
关于 JS:
我相信干净的代码编写。越干净越好——在你的编码冒险中坚持这一点。
首先,我们使用 $icons
- 我们拥有的每个图标。
我们正在等待 click
事件。
单击其中一个 $icons
后,我们将 $this
设置为单击的图标。我们还将 $icon
设置为单击图标内的 <i></i>
元素,只是为了更清晰的代码。
iconName
相当于图标的data-attribute,方便后续步骤使用。
现在我们有 // handle state
部分。很容易理解,如果$icon
有class,等于closeIconName
(本例为叉号),则为'active'。所以一旦这个 'active' 图标被点击,我们移除 'active' 状态,这意味着,我们移除 closeIconName
class 并添加 iconName
这是默认图标名称(取自数据属性)。如果图标不是 'active',我们删除图标并添加 closeIconName
图标。
注意:没有数据属性的图标不会简单地变为 fa-close 图标。
编辑:这里是 JSFiddle:https://jsfiddle.net/0fy2po3b/1/