0

この質問が冗長であることは承知していますが、専門家のアドバイスが本当に必要です。

次のシナリオでは、jQuery を間違った方法で使用しています。最も効率的なコードを生成するために、できるだけ多くの提案をいただければ幸いです。

ID = "#bottomrightbox" の親 div を持つ Web ページがあります。この親 "#bottomrightbox" div には、"#20111"、"#20112"、"#20113" などの ID を持つ一連の div が含まれています。

現在、これらの各 div (つまり、id #20111 の div) にリンク (つまり、id #link20111) を割り当てました。これをクリックすると、#bottomrightbox div の子が非表示になり、特定の div が表示されます。したがって、以下に示すコードは、各リンクの onclick 関数に単純に応答し、親 div 内のすべての div を非表示にして、それに割り当てられた特定の div を名前で表示します。私の問題は、このタイプの命名シーケンスに従う特定のリンクを持つ 40 を超える div があるため、このプロセスを処理する単一の関数に削減する必要がある jQuery コードの繰り返し行があることです。 割り当てられたリンクがクリックされたときに各 div を表示できるようにする jQuery 関数を作成する簡単な方法を誰かに教えていただければ幸いです。

私のコードは次のように動作します：

ID #link20111 のリンク -> クリック -> #bottomrightbox の子を非表示 -> ID #20111 の div を表示

ID #link20112 のリンク -> クリック -> #bottomrightbox の子を非表示 -> ID #20112 の div を表示

ID #link20113 のリンク -> クリック -> #bottomrightbox の子を非表示 -> ID #20113 の div を表示

<script type="text/javascript">
$(document).ready(function () {

$('#link20111').click(function () {
$('#bottomrightbox').children().hide();
$('#20111').fadeIn(500);

});

$('#link20112').click(function () {
$('#bottomrightbox').children().hide();
$('#20112').fadeIn(500);

});

$('#link20113').click(function () {
$('#bottomrightbox').children().hide();
$('#20113').fadeIn(500);

});

});
</script>

すべての助けに深く感謝します。

このコードのサンプル/jsfiddle は次のとおりです: http://jsfiddle.net/uhnxj/

4

3 に答える 3

1

正規表現セレクターを使用することをお勧めします。たとえば、コードは次のようになります。

$(':regex(id,link)').click(function() {
    var link_id = $(this).attr('id');
    var id = link_id.replace(/^link/, '');
    $('#bottomrightbox').children().hide();
    $('#' + id).fadeIn(500);
});

次のjsfiddleを参照してください。ただし、IDを数字で始めるべきではないという@SenorAmorのコメントも2番目です。

于 2012-04-21T03:43:52.630 に答える
0

あなたのHTMLはわかりませんが、これはうまくいきます。コメントを解除できるアラートも追加しました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<a href="javascript:void(0);" class="someclass" id="20111">20111</a><br />
<a href="javascript:void(0);" class="someclass" id="20112">20112</a><br />
<a href="javascript:void(0);" class="someclass" id="20113">20113</a><br />
<a href="javascript:void(0);" class="someclass" id="20114">20114</a><br />

<div id="bottomrightbox">
<div id="20111">apples</div>
<div id="20112">oranges</div>
<div id="20113">banana</div>
<div id="20114">lemon</div>
</div>

<script type="text/javascript">
$('.someclass').click(function(){
var divid = this.id;
// alert(divid);
$('#bottomrightbox').children().not('#'+divid).hide();
});
</script>
于 2012-04-21T04:28:14.070 に答える
0

HTML を表示せずに、HTML が次のように見える (および更新された) 場合:

<div id="buttoncollection">
 <div id="link20111" class="button">button 20111</div>
 <div id="link20112" class="button">button 20112</div>
 <div id="link20113" class="button">button 20113</div>
</div>

<div id="bottomrightbox">
 <div class="link20111">link20111</div>
 <div class="link20112">link20112</div>
 <div class="link20113">link20113</div>
</div>​

次に、簡単に行うことができます：

<script type="text/javascript">
$(document).ready(function () {

  $('#bottomrightbox').children().hide();

  $('#buttoncollection .button').click(function (event) {
    $('#bottomrightbox').children().hide();
    $('#bottomrightbox .' + event.target.id).fadeIn(500);
  });
});

な

JsFiddle の例

アップデート

コメントに基づいて更新された JsFiddle の例 JsFiddle

于 2012-04-21T03:46:29.817 に答える