Simplifique mi código jQuery, que es cada vez más grande y redundante

Question

No soy un experto en jQuery, pero estoy aprendiendo. Estoy usando un poco (creciendo a MUCHO) de jQuery para ocultar algunas imágenes y mostrar una sola imagen cuando se hace clic en un pulgar. Si bien este poco de jQuery funciona, es terriblemente ineficiente, pero no estoy seguro de cómo simplificar esto para algo que funciona en un nivel más universal.

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

así?

También se puede jugar con las clases css contexto como el que

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

y añadir/eliminar la clase de color en div #SELECT

He acaba de darse cuenta de que ni siquiera necesita 'cada uno' aquí

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

en el marcado

<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

¿Podría hacer algo como esto? (Marque para el caso corrct etc..not probado)

<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

Cambiar sus clases para que coincida con el caso de los identificadores de los enlaces, a continuación, hacer algo como:

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

Esto supone, que las imágenes seleccionadas son las mismas que las imágenes clicables correspondientes.

Answer 5

no he tenido la oportunidad de probar esto con imágenes, pero se puede acortar su HTML y script de la siguiente manera:

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