Question

我可以想到几种方法来实现我想在下面使用jQuery做的事情，但我想知道我能做到的最有效的方法：

我的页面上有五个可见框。我的页面上有五个隐藏的框。每个可见框都“分配”到隐藏框。当我点击一个可见的框时，它将显示分配给它的隐藏框。

我正在使用的HTML的一个例子是：

<div class="tag">Box 1</div>
<div class="tag">Box 2</div>
<div class="tag">Box 3</div>
<div class="tag">Box 4</div>
<div class="tag">Box 5</div>

<div class="hidden-tag">Box 1</div>
<div class="hidden-tag">Box 2</div>
<div class="hidden-tag">Box 3</div>
<div class="hidden-tag">Box 4</div>
<div class="hidden-tag">Box 5</div>

然后当然：

.hidden-tag {
    display: none;
}

使用jQuery，当我点击标签Box 1时，显示隐藏标签Box 1的最有效方法是什么？

请记住，如果需要，我可以编辑HTML以在每个框和其合作伙伴之间绘制连接。

Answer 1

这是我将使用的方法。

var divsHidden$ = $('div.hidden-tag'), divs$;

divs$ = $('div.tag').on('click', function() {
   divsHidden$.toggle(false).eq(divs$.index(this)).toggle(true);
})

Answer 2

HTML（这只是一个明显的例子。你显然可以使用更短的单词而不是-）

<div id="tag1" class="tag">Box 1</div>
<div id="tag2" class="tag">Box 2</div>
<div id="tag3" class="tag">Box 3</div>
<div id="tag4" class="tag">Box 4</div>
<div id="tag5" class="tag">Box 5</div>

<div class="hidden hidden-tag1">Box 1</div>
<div class="hidden hidden-tag2">Box 2</div>
<div class="hidden hidden-tag3">Box 3</div>
<div class="hidden hidden-tag4">Box 4</div>
<div class="hidden hidden-tag5">Box 5</div>

jquery的

$('.tag').on('click', function() {
    var x = $(this).attr('id');
    $('.hidden').hide();
    $('.hidden-' + x).show();
});

所以使用这个jQuery，当你点击任何.tag元素时，它会将那些元素id保存为变量x。

然后我们隐藏所有.hidden's以便它们消失，但然后显示我们想要的那个。

在JavaScript / jQuery中使用锚定位的基本方法

2 个答案: