从jQuery Selector中提取子字符串

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在滑动按钮标识第一-后启动：

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

Answer 2

试试这个：

//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 3

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

<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 4

我觉得像这样的工作：

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

Answer 5

不知道你的HTML。假设＃计划，画廊是<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 6

好吧，如果你真的想编写的代码一样，你可以分割的-的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(); 
});