简化我的 jQuery 代码,该代码变得越来越庞大和冗余
我不是 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>
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
就这样?
您还可以使用这样的上下文 css 类
,并在 #select div 上添加/删除颜色类
我刚刚意识到您甚至不需要
标记中的“each”
like that?
Also you can play with context css classes like that
and add/remove color class on #select div
I've just realize that you don't even need 'each' here
in markup
你可以做这样的事情吗? (检查正确的情况等..未测试)
You could do something like this? (check for corrct case etc..not tested)
更改您的类以匹配链接 id 的大小写,然后执行以下操作:
Change your classes to match the case of the ids of the links, then do something like:
这假设所选图像与相应的可点击图像具有相同的 src。
This assumes, that the selected images are the same src as the corresponding clickable images.
我还没有机会用图像来测试这一点,但您可以按如下方式缩短 HTML 和脚本:
I haven't had a chance to test this with images, but you can shorten your HTML and script as follows: