Javascript 如何“关联”元素

我想知道如何将两个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>

我怎样才能使其中的两个相互关联，这样我就不必写得太长，只需使用这个

使用带有选择器$的ends，通过拆分原始ID并获取名称gameN的第一[0]部分来检索ID名称的第一部分

但更好的例子是使用以下HTML：

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

使用带有选择器$的ends，通过拆分原始ID并获取名称gameN的第一[0]部分来检索ID名称的第一部分

但更好的例子是使用以下HTML：

---

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

将类用于类似行为，并从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>

---

将类用于类似行为，并从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>

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

我选择第一队 我选择第二队 这是第一场比赛 这是第二场比赛 JavaScript:

$'.selector'。单击函数{ var target=+$this.data'fadetarget'； $target.toggleClass'selected'； }; 使用此方法，关联在标记中是显式的，并且在重新排列时不会失败。

我更喜欢使用HTML5的data-*属性使关联更显式：

我选择第一队 我选择第二队 这是第一场比赛 这是第二场比赛 JavaScript:

$'.selector'。单击函数{ var target=+$this.data'fadetarget'； $target.toggleClass'selected'； };

---

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

这是可行的，我过去曾亲自使用过，但请注意，使用@user1689607这样的类可能在性能方面更好/更快。@Mahn我个人同意你的看法，但并非总是可以对HTML进行一些关键更改，特别是当它由凌乱的php返回时。添加了一个新的演示。谢谢第二种方法我唯一不喜欢的是，如果DOM被重新排列，它的脆弱性会被破坏。谢谢你的帮助。有什么方法可以一次进行多个选择吗？这很有效，我过去也曾使用过，但请注意，使用@user1689607这样的类可能在性能方面更好/更快。@Mahn我个人同意你的看法，但并非总是可以对HTML进行一些关键更改，特别是当它由凌乱的php返回时。添加了一个新的演示。谢谢第二种方法我唯一不喜欢的是，如果DOM被重新排列，它的脆弱性会被破坏。谢谢你的帮助。有什么方法可以一次进行多个选择吗？@steveax据我所知，只有在类/ID发生更改时才会中断，而不是在DOM顺序发生更改时才会中断。@steveax据我所知，只有在类/ID发生更改时才会中断，而不是在DOM顺序发生更改时才会中断。

<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>

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

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