重复的代码

Question

有没有办法缩短这个感觉就像我在重复代码，看起来很不整洁？

jQuery(document).ready(function() { 
    $('.allText').hide(); 


$('#b1').click(function() { 
    $('.allText').hide(); 
    $('#text1').fadeIn(800); 
}); 

$('#b2').click(function() { 
    $('.allText').hide(); 
    $('#text2').fadeIn(800); 
}); 

$('#b3').click(function() { 
    $('.allText').hide(); 
    $('#text3').fadeIn(800); 
}); 

$('#b4').click(function() { 
    $('.allText').hide(); 
    $('#text4').fadeIn(800); 
}); 

$('#b5').click(function() { 
    $('.allText').hide(); 
    $('#text5').fadeIn(800); 
}); 

$('#b6').click(function() { 
    $('.allText').hide(); 
    $('#text6').fadeIn(800); 
}); 


$('#b7').click(function() { 
    $('.allText').hide(); 
    $('#text7').fadeIn(800); 
}); 

}); 

Answer 1

$('#b1,#b2,#b3,#b4,#b5,#b6').click(function() { 
    $('.allText').hide(); 
    $('#text'+this.id.substr(-1)).fadeIn(800); 
}); 

Answer 2

创建一个接受数作为参数的新的功能，然后添加字符串一起：

$('#b' + id).click(function() { 
    $('.allText').hide(); 
    $('#text' + id).fadeIn(800); 
}); 

在这种情况下id是参数。

然后，您可以创建一个for循环来反复运行该函数。在需要添加东西的情况下，这非常容易。

Answer 3

你可以指定一个类，使一些后像这样（如果你把你的元素类 “bclass”）

$('.bclass').click(function(){ 
    $('.allText').hide(); 
    $('#text'+this.id.substr(-1)).fadeIn(800); 
}); 

Answer 4

添加class到B为例元素：

<div id="b1" class="b"></div> 
<div id="b2" class="b"></div> 
<div id="b3" class="b"></div> 

并使用class点击事件

$('.b').click(function() { 
    $('.allText').hide(); 
    $('#text'+this.id.substr(-1)).fadeIn(800); 
}); 

OR

<div id="b1" class="b" data-text="#text1"></div> 
<div id="b2" class="b" data-text="#text2"></div> 
<div id="b3" class="b" data-text="#text3"></div> 


$('.b').click(function() { 
    $('.allText').hide(); 
    $((this).data("text")).fadeIn(800); 
}); 

AS @joeframbach建议您可以重构这个

Answer 5

一种方式是通过将人的B＃元素div标签，然后选择div标签与它的ID /类，并使用.children()得到所有的b＃元素。

例子：

$('#mydiv').children().click(function() { 
    $('.allText').hide(); 
    $('#text2').fadeIn(800); 
});