重复代码

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

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

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

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

在这种情况下，id是参数。

之后，您可以创建一个for循环来反复运行该功能。在你需要添加东西的情况下，这几乎可以让你的生活变得轻松。

Answer 4

你可以指定一个类，然后再做这样的事情（如果你把你的元素类放到“bclass”中）

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

Answer 5

你可以重构的一种方法是将b＃元素放在div标签中，然后用它的id / class选择div标签，并使用.children()获取所有b＃元素。

示例：

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