顯示第n個：1區，當我點擊第n：錨

我想隱藏的** **點擊和.project-tile-normal顯示相應的描述DIV .detail-tile。

我閱讀了一些關於我的問題的文章，但我遇到了一個邏輯磚牆在我腦海中。不用說，我是jquery的初學者，也許有更好的方法來做到這一點，我只是沒有找到它。

這裏是我迄今爲止所發現的「答案」：
Hide Children, Show nth Child - 最接近的回答我的問題
Show and Hide Several Links - 該解決方案使我頭暈

我的HTML由兩排div，類似於簡化的表示法：

<div class="wrapper"> 
<div class=".project-tile-normal">some pictures</div> 
<div class=".project-tile-normal"></div> 
<div class=".project-tile-normal"></div> 

<div class=".detail-tile">description</div> 
<div class=".detail-tile"></div> 
<div class=".detail-tile"></div> 
</div>

這是我迄今爲止編碼的：

JQUERY

$(document).ready(function(){ 
$('.project-tile-normal').on("click", function() { 
if($(this).hasClass("active")) { 
    $(this).fadeOut(150); 
} else { 
    var itemid = '#div' + $(this).attr('target'); // my own try to get the Element of the divs. 
    console.log(itemid); 
    $(this).addClass("active"); 
$(".detail-tile").removeClass("hidden"); 
} 
}); 

$('button').on("click", function(){ 
    $(".detail-tile").addClass("hidden"); 
    $(".project-tile-normal").fadeIn(150); 
    $(".project-tile-normal").removeClass("active"); 
}); 
});//document ready

我應該放在一個陣列中的所有項目，然後算出來？感謝您的幫助提前。

來源

2016-06-11 Glockohnee

首先注意到的是，在HTML你class屬性不應包含任何.字符。

$('.project-tile-normal').click(function() { 
    var index = $(this).index(); 
    $('.detail-tile').hide().eq(index).show(); 
});

Working example

來源

2016-06-11 19:30:55

謝謝：

關於JS，你可以從點擊的元素檢索index()然後選擇使用eq()匹配所需的元素，像這樣通過索引鏈接元素爲精心製作的答案！班級屬性確實是粗心大意的錯誤。 – Glockohnee

你聲明你的類在你的HTML中是錯誤的。這將是項目瓷磚正常而不是。項目瓷磚正常。在這樣做你會發現你的事件工作。然後，您可以實際按照這些教程在項目標題點擊中取消所需的行爲。

來源

2016-06-11 19:29:21

首先刪除類屬性前的.，因爲不需要它。根據jQuery代碼，不需要它。如果您正在使用.，則需要使用\.將其轉義，在jQuery選擇器中它可能類似於$('.\\.project-tile-normal')。

現在你可以做使用index()和eq()休息，

$('.project-tile-normal').click(function() { 
 
    // you can use toggle if you want toggle between the show and hidden 
 
    // else use show method 
 
    $('.detail-tile').eq($(this).index()).toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="project-tile-normal">some pictures</div> 
 
    <div class="project-tile-normal">1</div> 
 
    <div class="project-tile-normal">2</div> 
 

 
    <div class="detail-tile">description</div> 
 
    <div class="detail-tile">1</div> 
 
    <div class="detail-tile">2</div> 
 
</div>

來源

2016-06-11 19:30:00

顯示第n個：1區，當我點擊第n：錨

回答

相關問題