javascript - 如何获取 "relate"元素

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

使用 ends with 选择器 $ 并通过拆分原始 ID 并获取第一个 ([0]) 部分名称 (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');
});

这将允许您删除已经选择的 类并将其分配给索引匹配 元素。