Question

我知道这是一个热门话题，我在jQuery中阅读了一些关于子字符串选择的文章，但是无法弄清楚如何让我的具体示例更有效率，任何建议都会受到赞赏。

我有以下代码：

$('#plan-gallery').click(function(){
    $('#gallery').addClass('active-slide') 
    $('#gallery').fadeIn() 
});

$('#plan-ensuite').click(function(){
    $('#ensuite').addClass('active-slide') 
    $('#ensuite').fadeIn() 
});

$('#plan-bedroom').click(function(){
    $('#bedroom').addClass('active-slide') /* This code line is redundant */
    $('#bedroom').fadeIn() /* This code line is also redundant */
});

这种代码在我的script.js中重复多次，我想摆脱它的冗余。

任何jQuery向导都能帮助我改进代码吗？

提前致谢

Answer 1

假设幻灯片的ID在幻灯片按钮ID中的第一个-之后开始：

$('#plan-gallery,#plan-ensuite,#plan-bedroom').click(function(){
   $('#' + this.id.substring(this.id.indexOf('-') + 1)).addClass('active-slide').fadeIn();
});

Answer 2

好吧，如果您真的想编写代码，可以在id上拆分-属性，并使用第二部分构成新的选择器。您也可以将jQuery调用链接到彼此。

$("#plan-gallery, #plan-ensuite, #plan-bedroom").live("click", function(){
    $("#" + $(this).attr("id").split("-")[1]).addClass('active-slide').fadeIn() 
});

但是我不会将我想要做的事情混合到我点击的id中，因为最终会紧密耦合。请考虑这样的事情，它可以让你指定你想要定位的内容，并且每次有新东西时都不必更新jQuery选择器：

<a href="#" id="plan-gallery" class="plan" data-target="#gallery">Gallery</a>
<a href="#" class="plan" data-target=".images">All images</a>

$(".plan").live("click", function(){
    $($(this).data("target")).addClass('active-slide').fadeIn();
});

Answer 3

不确定您的HTML。假设＃plan-gallery是<a>：

<a href="#" class="opener" rel="gallery">Gallery</a>
<a href="#" class="opener" rel="ensuite">Ensuite</a>
<a href="#" class="opener" rel="bedroom">Bedroom</a>

<div id="gallery">...</div>
<div id="ensuite">...</div>
<div id="bedroom">...</div>

然后你可以这样做：

$('a.opener').click(function(){
    $('#'+$(this).attr('rel')).addClass('active-slide').fadeIn();

}）;

Answer 4

试试这个：

//for example
$('#plan-gallery').click(function(){
    addandfade(this);
});

$('#plan-ensuite').click(function(){
    addandfade(this);
});

$('#plan-bedroom').click(function(){
    addandfade(this);
});

function addandfade(obj){
   var open_id = obj.id.substring(obj.id.indexOf('-') + 1); //thanks @Dan
   $("#"+open_id).addClass('active-slide').fadeIn();
}

你可以一遍又一遍地使用同样的功能

请参阅小提琴：http://jsfiddle.net/maniator/teCFV/

Answer 5

如果你能改变标记，你可以做这样的事情：

<script type="text/javascript">
    $('.nav div').click(function(){
        //hide all slides
        $('.sliders div').hide();

        //make active w/ id attr
        var tag = $(this).attr('id');
        $('.sliders').find(tag).show();
    });
</script>

<div class="nav">
    <div id="slide-1"><img src="..."/></div>
    <div id="slide-2"><img src="..."/></div>
    <div id="slide-3"><img src="..."/></div>
</div>

<div class="sliders">
    <div class="slide-1"></div>
    <div class="slide-2"></div>
    <div class="slide-3"></div>
</div>

Answer 6

我认为这样的事情会起作用：

$('#plan-gallery,#plan-bedroom,#plan-ensuite').click(function(){
    $(this).child().addClass('active-slide') 
    $(this).child().fadeIn() 
});

从jQuery Selector中提取子串

6 个答案: