如何根据点击值jquery显示隐藏的内容？

Question

抱歉的中间理解。我的意思是指数，而不是价值。抱歉。

我想知道是否有一种方法来使用此jsfiddle示例中显示的内容“.wbox”的值与隐藏值一致，点击时会显示隐藏的内容？

例如，点击Cont 1时，隐藏框1显示。点击Cont2时，隐藏框2显示...等等。

这里是我的小提琴：http://jsfiddle.net/kqbLtn8b/1/

HTML：

<div class="box"> 
    <div class="content one"> 
     <h1>Cont 1</h1> 
    </div> 
    <div class="content two"> 
     <h1>Cont 2</h1> 
    </div> 
    <div class="content three"> 
     <h1>Cont 3</h1> 
    </div> 
</div> 

<div class="hidden-content"> 
    <div class="hidden-box b-one">one</div> 
    <div class="hidden-box b-two">two</div> 
    <div class="hidden-box b-three">three</div>  
</div> 

的jQuery：

var boxVal = $('.box').val(); 

感谢您的帮助！

什么我真的要做的是从像这样缩短了代码：

$('.one').on('click', function(){ 
    $('.b-one').show() 
}); 

等等，其余

Answer 1

试试这个：content DIV的使用索引显示hidden-box

$(function(){ 
    $('.content').click(function(){ 
     var index = $(this).index(); 
     $('.hidden-content .hidden-box:eq('+index+')').show(); 
    }); 
}); 

并在您的css中进行更改，而不是隐藏hidden-content div您需要隐藏hidden-box。因此，改变你的

.hidden-content{ 
    display:none; 
} 

到

.hidden-box{ 
    display:none; 
} 

Demo

Answer 2

这是另一种方式（尽管不那么可靠，因为它，如果你改变你的班会打破）：

$(function() { 
 
    $('.content').on('click', function() { 
 
     var className = $(this).attr('class').replace('content', '').trim();   
 
     $('.hidden-box').hide(); 
 
     $('.b-' + className).show(); 
 
    }); 
 
});

.hidden-box { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="content one"> 
 
     <h1>Cont 1</h1> 
 
    </div> 
 
    <div class="content two"> 
 
     <h1>Cont 2</h1> 
 
    </div> 
 
    <div class="content three"> 
 
     <h1>Cont 3</h1> 
 
    </div> 
 
</div> 
 

 
<div class="hidden-content"> 
 
    <div class="hidden-box b-one">one</div> 
 
    <div class="hidden-box b-two">two</div> 
 
    <div class="hidden-box b-three">three</div>  
 
</div>

UPDATE

基于@Regent评论，我同意，这将是一个更可靠的方式，因为如果你改变你的标记，它仍然工作。 你只需要一个data属性添加到您的标记将被用于匹配的元素：

$(function() { 
 
    $('.content').on('click', function() {   
 
     var sel = $(this).data('rel'); 
 
     
 
     $('.hidden-box').each(function() { 
 
      $(this).toggle($(this).data('rel') == sel); 
 
     }); 
 
    }); 
 
});

.hidden-box { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="content one" data-rel="1"> 
 
     <h1>Cont 1</h1> 
 
    </div> 
 
    <div class="content two" data-rel="2"> 
 
     <h1>Cont 2</h1> 
 
    </div> 
 
    <div class="content three" data-rel="3"> 
 
     <h1>Cont 3</h1> 
 
    </div> 
 
</div> 
 

 
<div class="hidden-content"> 
 
    <div class="hidden-box b-one" data-rel="1">one</div> 
 
    <div class="hidden-box b-two" data-rel="2">two</div> 
 
    <div class="hidden-box b-three" data-rel="3">three</div>  
 
</div>

Answer 3

如果你要坚持你目前的HTML，这将是因为有两种方法来处理这种情况，所以很麻烦和脏。

1. 将字符串“Cont 1”转换为“one”，“Cont 2”转换为“two”。到九点为止，这一切都很好，但大约100 - >百？甚至千？
2. 另一种方法是将您的隐藏框命名为“b-one”，“b-2”，您可以将它们命名为“b-1”，“b-2”，“b-3”。这样，您可以检测单击的元素，然后擦除“Cont”部分，然后使用字符串的其余部分来获取隐藏部分的类。

上述两种情况下仍然给你一个非常非常脏的代码，因为你必须获得点击的元素和h1标签STIP的.html()。

所以我的建议是按照下面的方法。

HTML：

<div class="box"> 
    <div class="content one" rel="1"> 
     <h1>Cont 1</h1> 
    </div> 
    <div class="content two" rel="2"> 
     <h1>Cont 2</h1> 
    </div> 
    <div class="content three" rel="3"> 
     <h1>Cont 3</h1> 
    </div> 
</div> 

<div class="hidden-content"> 
    <div class="hidden-box b-1">one</div> 
    <div class="hidden-box b-2">two</div> 
    <div class="hidden-box b-2">three</div>  
</div> 

JS：

$('.content').on('click', function(){ 
    var divNum = this.rel; 

    $('.b-'+divNum).show(); 
}); 

Answer 4

我建议以下列方式重组你的HTML：

<div class="box"> 
<div class="content" id= "c1"> 
    <h1>Cont 1</h1> 
</div> 
<div class="content" id= "c2"> 
    <h1>Cont 2</h1> 
</div> 
<div class="content" id= "c3"> 
    <h1>Cont 3</h1> 
</div> 

<div class="hidden-content"> 
<div class="hidden-box" id= "h1">one</div> 
<div class="hidden-box" id= "h2">two</div> 
<div class="hidden-box" id= "h3">three</div>  

然后用这个作为你的jQuery代码：

$('.content').click(function(){ 
var num = $(this).attr('id').split("c")[1]; 
$("#h"+num).show(); 
}); 

和方式，也改变你的CSS：

.hidden-content{ 
/* display:none;*/ 
} 
.hidden-box{ 
width:35px; 
height:35px; 
border:1px solid black; 
display:none; 
}