通过jQuery一键隐藏/显示许多元素
Hide/Show many elements on single click by jQuery
我为Hide/Show的许多元素编写了几行jQuery代码,点击一下就可以了。但问题是;我有更多的图像类项目,所以我的脚本要长,我的问题是如何简化或缩短我的脚本,我的意思是有任何替代方案或新想法吗?请建议。
HTML:
<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- many many images -->
</span>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
JS:现场演示>
$("button.red").click(function(){
$(".images-red").show();
$(".images-blue, .images-pink").hide();
});
$("button.blue").click(function(){
$(".images-red, .images-pink").hide();
$(".images-blue").show();
});
$("button.pink").click(function(){
$(".images-red, .images-blue").hide();
$(".images-pink").show();
});
请为我的脚本提供简短的代码建议。谢谢
只需在这些按钮上添加一个通用的class
,
var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
iTags.hide().eq($(this).index("button.button")).show();
});
代码背后的概念是通过使用公共类为按钮绑定click事件。现在,在事件处理程序中,隐藏所有已经缓存的i
元素,并显示与单击按钮具有相同索引的元素。
演示
有关更多详细信息:.eq()
和.index(selector)
如果元素顺序不相同,则i
和按钮的顺序都不相同。然后您可以使用javascript的dataset
特性来解决这个问题。
var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
iTags.hide().filter(".images-" + this.dataset.class).show()
});
为了实现这一点,你必须将数据属性添加到你的按钮中,比如
<button data-class="red" class="button red">Red</button>
演示
这适用于
$("#choose-color button").click(function(){
var _class = $(this).attr('class');
$("#choose-color i").hide();
$(".images-"+_class).show();
});
https://jsfiddle.net/455k1hhh/5/
我知道这可能不是最漂亮的解决方案,但它应该能完成任务。
$("button").click(function(){
var classname = $(this).attr('class');
$("#choose-color span i").hide();
$(".images-"+classname).show();
});
由于依赖类名,您使未来的可扩展性变得有点困难,但这将解决您的迫切需求:
<div id="myImages">
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</div>
<div id="myButtons">
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
$("#myButtons button").click(function(){
var color = $(this).attr("class");
var imageClass = ".images-"+color;
$('#myImages').children("i").each(function () {
$(this).hide();
});
$(imageClass).show();
});
这是一个JSFiddle
编辑:注意我是如何将按钮和图像包装在父div中的,以允许您仅隔离要使用的按钮/图像。
您可以使用data-*
属性执行以下操作,因为当您有更多相同颜色的元素时,使用按钮的索引将不起作用。如果将来必须向按钮添加更多的类,那么简单地使用整个class
属性是行不通的。
$("button").click(function() {
var color = $(this).data('color');
var targets = $('.images-' + color);
targets.show();
$("span i").not(targets).hide();
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<br/>
<div id="choose-color">
<span>
<i class="images-red">Red Image</i>
<i class="images-blue hidden">Blue Image</i>
<i class="images-pink hidden">Pink Image</i>
<!-- Many many image -->
</span>
<br/>
<br/>
<button data-color="red">Red</button>
<button data-color="blue">Blue</button>
<button data-color="pink">Pink</button>
</div>
让所有图像共享一个类(例如.image
)是有意义的。然后你只需要为按钮和图像使用一个共享类;在这个例子中,我使用了颜色名称。现在,当单击任何按钮时,您都可以获取要显示的图像的类名。
试试看:
$("button").click(function(){
$(".image").hide();
var className = $(this).attr("class");
$("." + className).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
<div id="choose-color">
<span>
<i class="image red" style="">Red Image</i>
<i class="image blue" style="display: none;">Blue Image</i>
<i class="image pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</span>
<br/><br/>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
你可以试试这个:
<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many image -->
</span>
<br/><br/>
<button class="colour red" onclick="myFunction(this)">Red</button>
<button class="colour blue" onclick="myFunction(this)">Blue</button>
<button class="colour pink" onclick="myFunction(this)">Pink</button>
</div>
JS:见这里
$(".colour").click(function(){
var colors = ["red", "blue", "pink"];
for (i = 0; i < colors.length; i++) {
if($(this).hasClass(colors[i])){
$(".images-"+colors[i]).show();
}else{
$(".images-"+colors[i]).hide();
}
}
});
- 从桌面读取python文件时高亮显示代码
- 通过jQuery一键隐藏/显示许多元素
- 许多来自JSON的hrefs,在切换时单击会显示diffrent id
- 创建一个类似的“收件人”文本框,该文本框显示在许多基于Web的电子邮件网站上
- 在Meteor应用程序中查看页面源代码显示包含的许多脚本
- 从 Dropbox 中选择许多项目,并让它们显示在文本框中
- 许多复选框切换显示/隐藏
- 剑道UI隐藏栏/显示栏性能与许多栏
- 使用一个文件可以显示到许多网页
- 谷歌地图使用php和jquery动态显示许多标记
- 单击时显示/隐藏 Div(许多 Div)
- 当绘制许多d3 SVG对象时更新循环显示
- 显示许多id's下载cordova应用程序
- 如何在谷歌地图中绘制具有许多点的折线(并显示折线)
- FlotCharts:同一排行榜上的许多不同系列对Legend的显示影响非常严重
- 显示许多ajax调用的ajax旋转器
- 如何使用打字机插件显示许多
- 在有许多高图的页面上,一个特定的图表不显示
- 在车把模板中显示具有许多余烬关系的第一项
- 照片幻灯片显示任意许多照片使用html5