Упростите код jQuery, который растет огромным и избыточным

Question

Я не эксперт jQuery, но я учусь. Я использую немного (растет до LOT) 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> 

Answer 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; 
} 

и добавить/удалить цвет класс по Пометка 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> 

Answer 2

Вы могли бы сделать что-то вроде этого? (Проверьте corrct случае etc..not испытания)

<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> 

Answer 3

Измените классы, чтобы соответствовать случаю идентификаторов ссылок, то сделать что-то вроде:

$('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"); 
} 

Answer 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, что и соответствующие интерактивные изображения.

Answer 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; 
}) 
})