有没有更简单的方法来编写这段代码？

-1

有没有一种以更简单的方式编写代码的方法？下面的代码示例显然使用jQuery，只是因为它看起来很简单。我相信肯定有更好的办法，因为它重复了功能的内容。我感到困惑的是我如何将触发器中的ID传递给单个函数。有没有更简单的方法来编写这段代码？

当然，我意识到这可以用JavaScript来完成 - 任何编码指针，将不胜感激也。

感谢

这是HTML：

$(document).ready(function() { 
 
    $('.carImage').hide(); 
 
    $('#triggerA').click(function(e) { 
 
    $("#imageA").show(); 
 
    $("#imageB").hide(); 
 
    $("#imageC").hide(); 
 
    $("#imageD").hide(); 
 
    }); 
 
    $('#triggerB').click(function(e) { 
 
    $("#imageA").hide(); 
 
    $("#imageB").show(); 
 
    $("#imageC").hide(); 
 
    $("#imageD").hide(); 
 
    }); 
 
    $('#triggerC').click(function(e) { 
 
    $("#imageA").hide(); 
 
    $("#imageB").hide(); 
 
    $("#imageC").show(); 
 
    $("#imageD").hide(); 
 
    }); 
 
    $('#triggerD').click(function(e) { 
 
    $("#imageA").hide(); 
 
    $("#imageB").hide(); 
 
    $("#imageC").hide(); 
 
    $("#imageD").show(); 
 
    }); 
 
});

.item { 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    font-size: 3em; 
 
    padding: 1em; 
 
    margin: 0.5em; 
 
    background-color: #36F; 
 
    color: #FFF; 
 
    width: 75px; 
 
    float: left; 
 
} 
 
.item:hover { 
 
    background-color: #F0C; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
#selectors { 
 
    overflow: auto; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="selectors"> 
 
    <div class="item" id="triggerA"> 
 
    A 
 
    </div> 
 
    <div class="item" id="triggerB"> 
 
    B 
 
    </div> 
 
    <div class="item" id="triggerC"> 
 
    C 
 
    </div> 
 
    <div class="item" id="triggerD"> 
 
    D 
 
    </div> 
 
</div> 
 

 
<img src="http://dummyimage.com/100/ff0" id="imageA" class="carImage" /> 
 
<img src="http://dummyimage.com/100/f0f" id="imageB" class="carImage" /> 
 
<img src="http://dummyimage.com/100/0ff" id="imageC" class="carImage" /> 
 
<img src="http://dummyimage.com/100/0f0" id="imageD" class="carImage" />

来源

2015-01-13 AliH

嗯，你已经用JavaScript做什么呢？ – adeneo

你可以用css来完成所有的工作，只取决于你想要的确切功能。 – Kenyanke

您可以在选择器中一次选择多个项目（例如$（'＃imageB，#imageC，#imageD'）。hide（）） – tabz100

你可以使用.index()和class ES简化代码。

$(document).ready(function() { 
 
    $('.carImage').hide(); 
 
    $('.item').click(function() { 
 
    $('.carImage').hide().eq($(this).index()).show(); 
 
    }) 
 
});

.item { 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    font-size: 3em; 
 
    padding: 1em; 
 
    margin: 0.5em; 
 
    background-color: #36F; 
 
    color: #FFF; 
 
    width: 75px; 
 
    float: left; 
 
} 
 
.item:hover { 
 
    background-color: #F0C; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
#selectors { 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="selectors"> 
 
    <div class="item" id="triggerA"> 
 
    A 
 
    </div> 
 
    <div class="item" id="triggerB"> 
 
    B 
 
    </div> 
 
    <div class="item" id="triggerC"> 
 
    C 
 
    </div> 
 
    <div class="item" id="triggerD"> 
 
    D 
 
    </div> 
 
</div> 
 

 
<img src="http://dummyimage.com/100/ff0" id="imageA" class="carImage" /> 
 
<img src="http://dummyimage.com/100/f0f" id="imageB" class="carImage" /> 
 
<img src="http://dummyimage.com/100/0ff" id="imageC" class="carImage" /> 
 
<img src="http://dummyimage.com/100/0f0" id="imageD" class="carImage" />

来源

2015-01-13 23:05:06

辉煌，谢谢！ – AliH

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Feature bar demo</title> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $('.carImage').hide(); 
 
    $('.item').click(function(e) { 
 
     $('.carImage').each(function(index, img) { 
 
      img.style.display = (img.id.slice(-1) == e.target.id.slice(-1) ? 'inline-block' : 'none') 
 
     }); 
 
    }); 
 
}); 
 
</script> 
 
<style> 
 
\t .item \t { 
 
\t \t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 
\t \t font-size:3em; 
 
\t \t padding:1em; 
 
\t \t margin:0.5em; 
 
\t \t background-color:#36F; 
 
\t \t color:#FFF; 
 
\t \t width:75px; 
 
\t \t float:left; 
 
\t } 
 
\t .item:hover \t { 
 
\t \t background-color:#F0C; 
 
\t } 
 
\t a \t { 
 
\t \t text-decoration:none; 
 
\t \t color:#FFF; 
 
\t } 
 
\t #selectors \t { 
 
\t \t overflow:auto; 
 
\t } 
 
</style> 
 
</head> 
 

 
<body> 
 
\t <div id="selectors"> 
 
     <div class="item" id="triggerA"> 
 
     A 
 
     </div> 
 
     <div class="item" id="triggerB"> 
 
     B 
 
     </div> 
 
     <div class="item" id="triggerC"> 
 
     C 
 
     </div> 
 
     <div class="item" id="triggerD"> 
 
     D 
 
     </div> 
 
    </div> 
 
\t 
 
\t \t <img src="cars1.jpg" id="imageA" class="carImage"> 
 
     <img src="cars2.jpg" id="imageB" class="carImage"> 
 
     <img src="cars3.jpg" id="imageC" class="carImage"> 
 
     <img src="cars4.jpg" id="imageD" class="carImage"> 
 

 
</body> 
 
</html>

来源

2015-01-13 23:06:10 theliberalsurfer

有没有更简单的方法来编写这段代码？

回答

相关问题