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

Question

sorry for the midunderstanding. I meant index, not value. Sorry.

I am wondering if there is a way to use the value of the shown content ".wbox" of this jsfiddle example to coincide with the hidden value, that when clicked will show the hidden content?

For example, When Cont 1 is clicked, hidden box 1 shows. When Cont2 is clicked, hidden box 2 shows... and so forth.

Here is my fiddle: 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();

Thanks for any help!

What I am really trying to do is shorten the code from something like this:

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

and so forth with the rest

Answer 1

Try this : use index of content div to show hidden-box

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

And make change in your css, instead of hiding hidden-content div you need to hide hidden-box . So change your

.hidden-content{
    display:none;
}

to

.hidden-box{
    display:none;
}

Demo

Answer 2

This is another way (although not so reliable, as it would break if you change your classes):

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

Based on @Regent comment which I agree to, this would be a more reliable way because it will work even if you change your markup. You just need to add a data attribute to your markup that will be used to match elements:

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

If you want to stick to the current HTML you have, it is going to be cumbersome and dirty since there are 2 ways to handle that scenario.

1. Translate a string like "Cont 1" into "one", "Cont 2" into "two". It's all well and good till nine but what about 100 -> hundred? Or even thousand?
2. The other approach is instead of naming your hidden boxes as "b-one", "b-two", you can name them "b-1", "b-2", "b-3". That way you can just detect the clicked element and then wipe of the "Cont " part and then use the remainder of the string to get the hidden part's class.

Both the above cases will still give you a very very dirty code since you have to get the .html() of the clicked element and stip of h1 tags.

So my suggestion would be to follow the below method.

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

I recommend restructuring your HTML in the following way:

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

then use this as your jquery code:

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

and by the way, change your css too:

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