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

これをリファクタリングできる 1 つの方法は、すべての b# 要素を div タグに入れてから、id/class でその div タグを選択し、.children()すべての b# 要素を取得するために使用することです。

例：

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