0

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

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);
});

});
4

5 回答 5

3 
$('#b1,#b2,#b3,#b4,#b5,#b6').click(function() {
    $('.allText').hide();
    $('#text'+this.id.substr(-1)).fadeIn(800);
});
于 2013-03-05T15:45:27.590 回答
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);
});

或者

<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 建议

于 2013-03-05T15:45:58.560 回答
1

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

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

在这种情况下id是参数。

之后，您可以创建一个for循环来一遍又一遍地运行该函数。在您需要添加一些东西的情况下，这几乎可以让您的生活变得轻松。

于 2013-03-05T15:44:06.873 回答
1

你可以分配一个类，然后做这样的事情（如果你把你的元素类“bclass”）

$('.bclass').click(function(){
    $('.allText').hide();
    $('#text'+this.id.substr(-1)).fadeIn(800);
});
于 2013-03-05T15:45:24.383 回答
0

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

例子：

$('#mydiv').children().click(function() {
    $('.allText').hide();
    $('#text2').fadeIn(800);
});
于 2013-03-05T15:50:58.183 回答