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

我怎样才能使它们中的两个相关，所以我不必写很长的路而只需使用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

我更喜欢使用 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');
});

使用这种方法，关联在标记中是明确的，并且在重新排列时不会失败。

于 2012-09-25T00:37:52.557 回答