我怎样才能简化这一点jquery？在每个单击函数中有两个不同选择器的某种数组？

To explain what this does>> each click function reacts to a click of an element inside a logo carousel and creates a pop up outside the carousel explaining what the element/logo is...

为了解释这一点>>每个点击功能对徽标轮播内部元素的点击作出反应,并在轮播外部创建一个弹出窗口,说明元素/徽标是什么......

Just getting some ideas, have fun with this thank you in advance!!

只是得到一些想法,玩得开心,谢谢你提前!!

To see the HTML and the script in its working condition its @ this link temporarily >>

要查看HTML和脚本的工作状态,请暂时使用@ this链接>>

http://grayghostventures.com/x3.2/portfolio/portfolio3.html

Just trying to shore up some code before its all said and done!

只是试图在完成所有代码之前支持一些代码!

jQuery(document).ready(function() {

var hideAll = "#hoverState1,#hoverState2,#hoverState3,#hoverState4,#hoverState5,#hoverState6,#hoverState7,#hoverState8,#hoverState9,#hoverState10,#hoverState11,#hoverState12,#hoverState13,#hoverState14,#hoverState15";

// Hover States for pop Ups


$("#logoPop1").click(function(){$(hideAll).fadeOut("slow");$("#hoverState1").fadeIn("slow");});
$("#logoPop2").click(function(){$(hideAll).fadeOut("slow");$("#hoverState2").fadeIn("slow");});
$("#logoPop3").click(function(){$(hideAll).fadeOut("slow");$("#hoverState3").fadeIn("slow");});
$("#logoPop4").click(function(){$(hideAll).fadeOut("slow");$("#hoverState4").fadeIn("slow");});
$("#logoPop5").click(function(){$(hideAll).fadeOut("slow");$("#hoverState5").fadeIn("slow");});
$("#logoPop6").click(function(){$(hideAll).fadeOut("slow");$("#hoverState6").fadeIn("slow");});
$("#logoPop7").click(function(){$(hideAll).fadeOut("slow");$("#hoverState7").fadeIn("slow");});
$("#logoPop8").click(function(){$(hideAll).fadeOut("slow");$("#hoverState8").fadeIn("slow");});
$("#logoPop9").click(function(){$(hideAll).fadeOut("slow");$("#hoverState9").fadeIn("slow");});
$("#logoPop10").click(function(){$(hideAll).fadeOut("slow");$("#hoverState10").fadeIn("slow");});
$("#logoPop11").click(function(){$(hideAll).fadeOut("slow");$("#hoverState11").fadeIn("slow");});
$("#logoPop12").click(function(){$(hideAll).fadeOut("slow");$("#hoverState12").fadeIn("slow");});
$("#logoPop13").click(function(){$(hideAll).fadeOut("slow");$("#hoverState13").fadeIn("slow");});
$("#logoPop14").click(function(){$(hideAll).fadeOut("slow");$("#hoverState14").fadeIn("slow");});
$("#logoPop15").click(function(){$(hideAll).fadeOut("slow");$("#hoverState15").fadeIn("slow");});

$(".closePop").click(function(){$(hideAll).fadeOut("slow");});


// JQuery End
});

1 个解决方案

#1

You can use an Attribute Starts With Selector:

您可以使用属性启动选择器:

jQuery(document).ready(function ($) {
    var $hoverState = $("[id^=hoverState]");

    $("[id^=logoPop]").click(function() {
        var id = ( this.id.match(/\d+$/) || [] )[0];
        $hoverState.not('#hoverState' + id).fadeOut("slow")
        $hoverState.filter('#hoverState' + id).fadeIn("slow");
    });

    $('.closePop').click(function () {
        $hoverState.fadeOut("slow");
    });
});