我为隐藏/显示点击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: live demo&gt;
$("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();
});
请建议我的脚本的简短代码。感谢。
答案 0 :(得分:6)
您可以通过向这些按钮添加一个公共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>
答案 1 :(得分:1)
这有效
$("#choose-color button").click(function(){
var _class = $(this).attr('class');
$("#choose-color i").hide();
$(".images-"+_class).show();
});
答案 2 :(得分:1)
我知道这可能不是最漂亮的解决方案,但它应该可以胜任。
$("button").click(function(){
var classname = $(this).attr('class');
$("#choose-color span i").hide();
$(".images-"+classname).show();
});
答案 3 :(得分:1)
您可以使用data-*
属性执行以下操作,因为当您有更多相同颜色的元素时,使用按钮的索引将无法正常工作。如果您将来必须向按钮添加更多类,那么仅使用整个class
属性将无法使用。
$("button").click(function() {
var color = $(this).data('color');
var targets = $('.images-' + color);
targets.show();
$("span i").not(targets).hide();
});
&#13;
.hidden {
display: none
}
&#13;
<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>
&#13;
答案 4 :(得分:1)
让所有图像共享一个类(例如.image
)是有意义的。然后你只需使用按钮和图像的共享类;在这个例子中,我使用了颜色名称。现在,当单击任何按钮时,您可以获取要显示的图像的类名称。
尝试一下:
$("button").click(function(){
$(".image").hide();
var className = $(this).attr("class");
$("." + className).show();
});
&#13;
<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>
&#13;
答案 5 :(得分:1)
由于依赖于类名,您通过这种方式使未来的可扩展性变得有点困难,但这可以解决您的迫切需求:
<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中的按钮和图像包装起来,以便仅隔离您要使用的按钮/图像。
答案 6 :(得分:0)
你可以试试这个:
<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:see here
$(".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();
}
}
});