如何根據點擊值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; 
}