JavaScript/jQuery中用锚定位的基本方法
JavaScript/jQuery中用锚定位的基本方法
提问于 2014-01-23 19:59:16
我可以想出几种方法来完成我在下面使用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，当我单击标签框1时，显示隐藏标签框1的最有效方法是什么？
请记住，如果需要，我可以编辑HTML，以便在每个框和它的合作伙伴之间绘制一个连接。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-23 20:10:44
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。
然后我们把所有隐藏的隐藏起来让它们消失，然后显示出我们想要的那个。
Stack Overflow用户
发布于 2014-01-23 20:07:04
这是我会用的方法。
var divsHidden$ = $('div.hidden-tag'), divs$;
divs$ = $('div.tag').on('click', function() {
divsHidden$.toggle(false).eq(divs$.index(this)).toggle(true);
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21318147
复制相关文章
相似问题
腾讯云开发者
