Help me to simplify my jQuery, it's growing huge and redundant!
- by liquilife
Hey all, I am no jQuery expert, but I'm learning. I'm using a bit (growing to a LOT) of jQuery to hide some images and show a single image when a thumb is clicked. While this bit of jQuery works, it's horribly inefficient but I am unsure of how to simplify this to something that works on more of a universal level.
<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>
