Đơn giản hóa mã jQuery của tôi, đang phát triển rất lớn và dư thừa

Question

Tôi không phải là chuyên gia về jQuery, nhưng tôi đang học. Tôi đang sử dụng một chút (phát triển đến một LOT) của jQuery để ẩn một số hình ảnh và hiển thị một hình ảnh duy nhất khi một ngón tay cái được nhấp vào. Trong khi điều này bit của jQuery hoạt động, nó khủng khiếp không hiệu quả nhưng tôi không chắc chắn làm thế nào để đơn giản hóa điều này để một cái gì đó mà hoạt động trên nhiều cấp độ phổ quát.

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

như vậy?

Ngoài ra bạn có thể chơi với các lớp bối cảnh css như thế

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

và thêm/gỡ bỏ lớp màu trên #select div

Tôi vừa mới nhận ra rằng bạn thậm chí không cần 'mỗi' đây

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

trong đánh dấu

<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

Bạn có thể làm điều gì đó như thế này? (Kiểm tra đối với trường hợp corrct etc..not thử nghiệm)

<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

Thay đổi lớp học của bạn để phù hợp với trường hợp của các id của các liên kết, sau đó làm một cái gì đó như:

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

này giả định, rằng các hình ảnh được chọn là src giống như hình ảnh có thể nhấp tương ứng.

Answer 5

tôi đã không có một cơ hội để kiểm tra điều này với những hình ảnh, nhưng bạn có thể rút ngắn HTML và kịch bản của bạn như sau:

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