如何使jquery脚本更短？
[英]How can I make jquery script shorter?
问题描述
I have got following code (i shorted it to make it more readable) And I would like to ask if it is possible to do not write almost the same code for every button? 
我有以下代码（我将其缩短以使其更具可读性），并且我想问问是否有可能不为每个按钮编写几乎相同的代码吗？ How can I do it the easiest way? 我该怎么做最简单的方法？ I have got 6 buttons and code would be quite long. 我有6个按钮，代码会很长。
<script>
$(document).ready(function(){
$("#option1").click(function(){
if($(".option1").is(":visible")){
$(".option1").hide("slow",function(){});
}
else{
$(".option2, .option3").hide("slow",function(){});
$(".option1").show("slow",function(){});
}
});
$("#option2").click(function(){
if($(".option2").is(":visible")){
$(".option2").hide("slow",function(){});
}
else{
$(".option1, .option3").hide("slow",function(){});
$(".option2").show("slow",function(){});
}
});
$("#option3").click(function(){
if($(".option3").is(":visible")){
$(".option3").hide("slow",function(){});
}
else{
$(".option1, .option2").hide("slow",function(){});
$(".option3").show("slow",function(){});
}
});
});
</script>
<body>
<div class="containter">
<div class="row">
<div class="col-md-4">
<button type="button" id="option1" class="btn btn-primary">Button1 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option2" class="btn btn-primary">Button2 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option3" class="btn btn-primary">Button3 >></button>
</div>
</div>
</div>
</body>
3 个解决方案
解决方案1
2 2015-09-28 17:10:12
Without the need to change much of your html, add a common class option to all your option1, option2, ... : 无需更改大部分html，将通用类option添加到所有option1，option2，...：
<div class ="option option1">a</div>
<div class ="option option2">b</div>
<div class ="option option3">c</div>
and then you can use this below: 然后您可以在下面使用它：
Array.from(document.getElementsByTagName('button')).forEach(function(btn){
btn.addEventListener('click', function(e){
if($("." + e.target.id).is(":visible")){
$("." + e.target.id).hide("slow",function(){});
}
else{
$(".option").hide("slow",function(){});
$("." + e.target.id).show("slow",function(){});
}
});
});
解决方案2
1 已采纳 2015-09-28 17:11:20
You can reduce the code to just one click listener. 您可以将代码减少为一键式侦听器。 Try this: 尝试这个：
<script>
$(document).ready(function() {
$(".btn-primary").click(function() {
var option = $(this).data("option");
if ($(".option." + option).is(":visible")) {
$(".option." + option).hide("slow", function() {});
} else {
$(".option").not("." + option).hide("slow", function() {});
$(".option." + option).show("slow", function() {});
}
});
});
</script>
<body>
<div class="containter">
<div class="row">
<div class="col-md-4">
<button type="button" id="option1" data-option="option1" class="btn btn-primary">Button1 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option2" data-option="option2" class="btn btn-primary">Button2 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option3" data-option="option3" class="btn btn-primary">Button3 >></button>
</div>
</div>
</div>
<!-- common class option added -->
<div class="options">
<div class="option option1"></div>
<div class="option option2"></div>
<div class="option option3"></div>
</div>
</body>
I added a common class to all the options, and a data-option attribute to your buttons. 我为所有选项添加了一个通用类，并为按钮添加了data-option属性。
解决方案3
0 2015-09-28 17:21:06
You don't need to check to see whether the current button is visible. 您无需检查当前按钮是否可见。 It's visible because it was just clicked on. 它是可见的，因为只需单击它即可。
All you need to do is show the other buttons that weren't clicked on and hide the one that was. 您需要做的就是显示未单击的其他按钮，并隐藏未单击的按钮。 To do this, assign the same class to all 3 buttons. 为此，将相同的类别分配给所有3个按钮。 In the example below, I added the class "myBtn" to all 3 buttons. 在下面的示例中，我向所有3个按钮添加了“ myBtn”类。
$(".myBtn").click(function () {
var id = $(this).attr('id');
$(".myBtn:not(#"+id+")").show("slow", function () {});
$(this).hide();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.