简化我的 jQuery 代码，它变得庞大而冗余答案

【问题标题】：Simplify my jQuery code, which is growing huge and redundant简化我的 jQuery 代码，它变得庞大而冗余
【发布时间】：2010-04-06 20:17:38
【问题描述】：

我不是 jQuery 专家，但我正在学习。我正在使用一点（增长到很多）jQuery 来隐藏一些图像并在单击拇指时显示单个图像。虽然这部分 jQuery 有效，但效率极低，但我不确定如何将其简化为更通用的东西。

<script>


$(document).ready(function () {

// Changing the Materials
$("a#shirtred").click(function () {
    $("#selectMaterials img").removeClass("visible");
    $("img.selectShirtRed").addClass("visible");
});

$("a#shirtgrey").click(function () {
    $("#selectMaterials img").removeClass("visible");
    $("img.selectShirtGrey").addClass("visible");
});

$("a#shirtgreen").click(function () {
    $("#selectMaterials img").removeClass("visible");
    $("img.selectShirtGreen").addClass("visible");
});

$("a#shirtblue").click(function () {
    $("#selectMaterials img").removeClass("visible");
    $("img.selectShirtBlue").addClass("visible");
});

// Changing the Collars
$("a#collarred").click(function () {
    $("#selectCollar img").removeClass("visible");
    $("img.selectCollarRed").addClass("visible");
});

$("a#collargrey").click(function () {
    $("#selectCollar img").removeClass("visible");
    $("img.selectCollarGrey").addClass("visible");
});

$("a#collargreen").click(function () {
    $("#selectCollar img").removeClass("visible");
    $("img.selectCollarGreen").addClass("visible");
});

$("a#collarblue").click(function () {
    $("#selectCollar img").removeClass("visible");
    $("img.selectCollarBlue").addClass("visible");
});

// Changing the Cuffs
$("a#cuffred").click(function () {
    $("#selectCuff img").removeClass("visible");
    $("img.selectCuffRed").addClass("visible");
});

$("a#cuffgrey").click(function () {
    $("#selectCuff img").removeClass("visible");
    $("img.selectCuffGrey").addClass("visible");
});

$("a#cuffblue").click(function () {
    $("#selectCuff img").removeClass("visible");
    $("img.selectCuffBlue").addClass("visible");
});

$("a#cuffgreen").click(function () {
    $("#selectCuff img").removeClass("visible");
    $("img.selectCuffGreen").addClass("visible");
});

// Changing the Pockets
$("a#pocketred").click(function () {
    $("#selectPocket img").removeClass("visible");
    $("img.selectPocketRed").addClass("visible");
});

$("a#pocketgrey").click(function () {
    $("#selectPocket img").removeClass("visible");
    $("img.selectPocketGrey").addClass("visible");
});

$("a#pocketblue").click(function () {
    $("#selectPocket img").removeClass("visible");
    $("img.selectPocketBlue").addClass("visible");
});

$("a#pocketgreen").click(function () {
    $("#selectPocket img").removeClass("visible");
    $("img.selectPocketGreen").addClass("visible");
});

});
</scrip>

<!-- Thumbnails which can be clicked on to toggle the larger preview image -->


        <div class="materials">
    <a href="javascript:;" id="shirtgrey"><img src="/grey_shirt.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="shirtred"><img src="red_shirt.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="shirtblue"><img src="hblue_shirt.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="shirtgreen"><img src="green_shirt.png" height="122" width="122" /></a> 
    </div>


    <div class="collars">
    <a href="javascript:;" id="collargrey"><img  src="grey_collar.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="collarred"><img  src="red_collar.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="collarblue"><img  src="blue_collar.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="collargreen"><img  src="green_collar.png" height="122" width="122" /></a>
    </div>

    <div class="cuffs">
    <a href="javascript:;" id="cuffgrey"><img  src="grey_cuff.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="cuffred"><img  src="red_cuff.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="cuffblue"><img  src="blue_cuff.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="cuffgreen"><img  src="/green_cuff.png" height="122" width="122" /></a>
    </div>

    <div class="pockets">
    <a href="javascript:;" id="pocketgrey"><img  src="grey_pocket.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="pocketred"><img  src=".png" height="122" width="122" /></a> 
    <a href="javascript:;" id="pocketblue"><img  src="blue_pocket.png" height="122" width="122" /></a> 
    <a href="javascript:;" id="pocketgreen"><img  src="green_pocket.png" height="122" width="122" /></a>
    </div>

<!-- The larger images where one from each set should be viewable at one time, triggered by the thumb clicked above -->


        <div class="selectionimg"> 
        <div id="selectShirt">
        <img src="grey_shirt.png" height="250" width="250" class="selectShirtGrey show" />        
        <img src="red_shirt.png" height="250" width="250" class="selectShirtRed hide" />        
        <img src="blue_shirt.png" height="250" width="250" class="selectShirtBlue hide" />        
        <img src="green_shirt.png" height="250" width="250" class="selectShirtGreen hide" />  </div>

         <div id="selectCollar">
        <img src="grey_collar.png" height="250" width="250" class="selectCollarGrey show" />        
        <img src="red_collar.png" height="250" width="250" class="selectCollarRed hide" />        
        <img src="blue_collar.png" height="250" width="250" class="selectCollarBlue hide" />        
        <img src="green_collar.png" height="250" width="250" class="selectCollarGreen hide" />       </div>

         <div id="selectCuff">
        <img src="grey_cuff.png" height="250" width="250" class="selectCuffGrey show" />        
        <img src="red_cuff.png" height="250" width="250" class="selectCuffRed hide" />        
        <img src="blue_cuff.png" height="250" width="250" class="selectCuffBlue hide" />        
        <img src="green_cuff.png" height="250" width="250" class="selectCuffGreen hide" />     </div>

         <div id="selectPocket">
        <img src="grey_pocket.png" height="250" width="250" class="selectPocketGrey show" />        
        <img src="hred_pocket.png" height="250" width="250" class="selectPocketRed hide" />        
        <img src="blue_pocket.png" height="250" width="250" class="selectPocketBlue hide" />        
        <img src="green_pocket.png" height="250" width="250" class="selectPocketGreen hide" />   
    </div>     </div>

【问题讨论】：

标签： javascript jquery simplify

【解决方案1】：

$("a[color]").each(function() {        
    $(this).click(function () {
        var color = $(this).attr('color');
        $("#selectCuff img").removeClass("visible");
        $("img[color="+color+"]").addClass("visible");
    });
});

喜欢吗？

你也可以玩这样的上下文 css 类

#select img { 
    display:none;
}
#select.red img.red{
    display:inline;
}

并在#select div 上添加/删除颜色类

我刚刚意识到你甚至不需要这里的“每个”

$("a[color]").click(function() {                
    var color = $(this).attr('color');
    $("#selectCuff img").removeClass("visible");
    $("img[color="+color+"]").addClass("visible");
});

在标记中

<a href="#" color="grey">show grey</a>
<div id="select">
<img src="grey_collar.png" height="250" width="250" color="grey" />
<img src="red_collar.png" height="250" width="250" color="red" />
</div>

【讨论】：

这看起来很棒。你能告诉我这是如何工作的吗？此解决方案是否假设我使用的是 CSS 颜色属性？如果是这样，我不是。我上面发布的代码可能会误导颜色 ID 和类名。这个页面更像是一个模型，将列出可能超过 100 种材料等。
此代码建议您使用自定义属性color。每个img 都应该拥有它，每个a 都应该拥有它。在a 的click 上，它将从a 的颜色属性中获取值，隐藏所有img 并仅显示具有相同值的属性颜色的img
我不会养成将数据存储在自定义属性中的习惯。这里更好的选择是使用类。
您可以在 HTML5 中使用data- 属性（参考：ejohn.org/blog/html-5-data-attributes）
@fudgey: 看起来很合理，但是使用 jquery 时 class 属性更方便

【解决方案2】：

你可以做这样的事情吗？（检查正确的案例等。未测试）

<script> 

function setupMaterialsClick(name)
{
   $("a#" + name).click(function () { 
       $("#selectMaterials img").removeClass("visible"); 
       $("img.select" + name).addClass("visible"); 
   }); 
}

$(document).ready(function () 
{ 

   // Changing the Materials 
   setupMaterialsClick("shirtred");
   // etc

   // Other bits

}); 

}); 
</script>

【讨论】：

【解决方案3】：

更改您的类以匹配链接 ID 的大小写，然后执行以下操作：

$('materials a').bind(changeSelection);
$('collars a').bind(changeSelection);
$('cuffs a').bind(changeSelection);
$('pockets a').bind(changeSelection);

function changeSelection()
{
 var id = $(this).attr('id');
 var selectClass = 'img.select'+id;
 $("#selectPocket img").removeClass("visible"); 
 $(selectClass).addClass("visible"); 
}

【讨论】：

【解决方案4】：

$("a").each(function() {
  $(this).click(function() {
    var src = $(this).children("img").attr("src");
    var img = $(".selectionimg").find("img[src$='"+src+"']");
    img.addClass("visible").siblings().removeClass("visible");
    return false;
  });
});

这假设所选图像与对应的可点击图像具有相同的 src。

【讨论】：

【解决方案5】：

我还没有机会用图像对此进行测试，但您可以按如下方式缩短 HTML 和脚本：

$(document).ready(function(){
 /* names in the materials variable must match the image file name */
 /* the script will form the filename as follows: grey_shirt.png */
 var materials = {
  'shirt'  : ["grey", "red", "blue", "green"],
  'collar' : ["grey", "red", "blue", "green"],
  'cuff'   : ["grey", "red", "blue", "green"],
  'pocket' : ["grey", "red", "blue", "green"]
 }
 /* Set up Content */
 var i, c = '', s = '<div class="selectionimg">';
 $.each(materials, function(key, value){
  c += '<div class="' + key + '">';
  s += '<div class="select' + key + '">';
  for (i=0; i<value.length; i++) {
   c += '<a href="#" rel="' + value[i] + '"><img class="thumb" src="' + value[i] + '_' + key + '.png"></a>';
   s += '<img src="' + value[i] + '_' + key + '.png" height="250" width="250" class="large-img select' + value[i];
   s += (i==0) ? ' show" />' : ' hide" />'; // add show class only the first selection
  }
  c += '</div>';
  s += '</div>';
 })
 $('#content').html(c + s + '</div>');

 /* Set up scripting */
 $('#content a').click(function(){
  var type = $(this).parent().attr('class');
  var color = $(this).attr('rel');
  $('.select' + type).find('img').removeClass('visible').end()
   .find('img.select' + color).addClass('visible');
  return false;
 })
})

【讨论】：