Как показать скрытый контент в соответствии с щелчком jquery?

Question

извините за недоразумение. Я имел в виду индекс, а не значение. Сожалею.

Мне интересно, можно ли использовать значение отображаемого содержимого «.wbox» этого примера jsfiddle, чтобы оно совпало со скрытым значением, которое при нажатии будет показывать скрытый контент?

Например, когда нажата кнопка «Конт. 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-two», вы можете назвать их «b-1», «b-2», «b-3». Таким образом, вы можете просто обнаружить элемент с щелчком, а затем вытереть часть «Cont», а затем использовать оставшуюся часть строки, чтобы получить класс скрытой части.

Оба вышеуказанные случаи еще будет давать вам очень очень грязный код, так как вы должны получить .html() из щелкнутого элемента и Штипа из h1 тегов.

Таким образом, мое предложение было бы следовать нижеописанному методу.

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