Question

我想知道如何“关联”两个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

我怎么能让它们中的两个相关，所以我不必长篇大论，只需使用this

Answer 1

jsBin demo

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

使用以选择器$结尾，并通过拆分原始ID并获取第一个（[0]来检索 ID 名称的第一部分}）部分名称（gameN）

a better idea demo

但更好的例子是使用此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的类并将其分配给索引匹配元素。

Answer 2

使用类来表示类似行为，并从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');
});

Answer 3

我更喜欢使用HTML5的data-*属性来使关联更加明确：

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

使用此方法，关联在标记中是显式的，如果重新排列，则不会失败。

如何“联系”元素

3 个答案:

jsBin demo

a better idea demo