2

2つのHTML要素をどのように「関連付ける」ことができるのだろうかと思っていました。たとえば、ユーザーが選択項目をクリックし、その要素に「関連する」要素を非表示にしたいとします。

<div id="game1Selection">I pick team1</div>
<div id="game2Selection">I pick team2</div>

<div id="game1">This is game 1</div>
<div id="game2">This is game 2</div>

私がしたいのは、ユーザーが「game1Selection」を選択すると、div「game1」が消え、game2、game3などでも同じことが起こるということです。私はこれを長い道のりで行う方法を知っています。

$('#game1Selection').click( function() {
  $('#game1').toggleClass('selected');
});  //selected has the attribute display:none

どうすればそれらのうちの2つを関連させることができるので、長い道のりを書く必要はなく、ただ使用するだけです。this

4

3 に答える 3

3

jsBinデモ

$('div[id$=Selection]').click(function(){
   var myID = this.id.split('Selection')[0];
   $('#'+myID).toggleClass('selected');
});

セレクターで終了を使用し、元のIDを分割して名前の最初の（）部分を取得することにより、 ID$名の最初の部分を取得します（gameN）[0]

より良いアイデアのデモ

しかし、はるかに良い例は、このHTMLを使用することです。

<div>
    <div class="selection">I pick team1</div>
    <div class="selection">I pick team2</div>
</div>

<div class="game">This is game 1</div>
<div class="game">This is game 2</div>

クリックされた要素を取得し、以下index()を使用して一致する要素を見つけます.eq()。

$('.selection').click(function(){
   var i = $(this).index();
   $('.game').removeClass('selected').eq(i).addClass('selected');
});

これにより、すでにクラスを削除して、インデックス一致要素selectedに割り当てることができます。

于 2012-09-25T00:13:14.763 に答える
1

同様の動作にクラスを使用し、IDから番号を取得します。

<div id="game1Selection" class="selection">I pick team1</div>
<div id="game2Selection" class="selection">I pick team2</div>

<div id="game1" class="game">This is game 1</div>
<div id="game2" class="game">This is game 2</div>

$('.selection').click( function() {
    $("#" + this.id.replace("Selection", "")).toggleClass('selected');
    $('.game').not(this).removeClass('selected');
});
于 2012-09-25T00:15:55.373 に答える
0

data-*関連付けをより明確にするために、HTML5 のプロパティを使用することを好みます。

<div class="selector" data-fadetarget="game1">I pick team1</div>
<div class="selector" data-fadetarget="game2">I pick team2</div>

<div id="game1">This is game 1</div>
<div id="game2">This is game 2</div>

JavaScript:

$('.selector').click( function() {
    var target = '#' + $(this).data('fadetarget');
    $(target).toggleClass('selected');
});

この方法を使用すると、関連付けはマークアップで明示的になり、再配置されても失敗しません。

于 2012-09-25T00:37:52.557 に答える