基於CSS類的選擇性顯示/隱藏難點

我正在研究一個js腳本，它將根據css類顯示/隱藏多個div，看起來非常簡單。我着手尋找這方面的一個例子，並在下面鏈接的文章中發現了一些近似的東西。我使用下面鏈接中的代碼作爲起點。基於CSS類的選擇性顯示/隱藏難點

Show/hide multiple divs using JavaScript

在我修改後的代碼（如下圖所示），我能夠隱藏所有（這是錯誤的），並顯示所有（其中正常工作。我不知道爲什麼它不針對CSS類「紅，綠色或藍色「，如果我在腳本中難以使用其中一個類名稱，它的工作方式與預期的一樣，所以我相當肯定我在引用css目標本身的方式時遇到了問題

我可以隱藏所有內容並顯示所有內容，但我很難僅顯示選定的類。

這裏是jsFiddle我是w請撥打：http://jsfiddle.net/juicycreative/WHpXz/4/

我的代碼如下。
的JavaScript

$('.categories li a').click(function() { 
    $('.marker').hide(); 
    $((this).attr('target')).show(); 
}); 

$('#cat-show').click(function() { 
    $('.marker').show(); 
});

HTML

<ul class="categories"> 
    <li id="cat-show" class="cat-col1" target="all" ><a href="#">All</a></li> 
    <li id="cat-models" class="cat-col1" target="red" ><a href="#">Model Homes</a></li> 
    <li id="cat-schools" class="cat-col1" target="blue"><a href="#">Schools</a></li> 
    <li id="cat-hospital" class="cat-col1" target="green" ><a href="#">Hospitals</a></li> 
</ul> 

<div id="locator"> 
    <div id="overview-00" class="marker models" title="Maracay Homes<br />at Artesian Ranch"></div> 
    <!--SCHOOLS--> 
    <div id="overview-01" class="marker red" title="Perry High School">1</div> 
    <div id="overview-02" class="marker red" title="Payne Jr. High School">2</div> 
    <div id="overview-03" class="marker blue" title="Hamilton Prep">3</div> 
    <div id="overview-04" class="marker blue" title="Ryan Elementary">4</div> 
    <div id="overview-05" class="marker green" title="Chandler Traditional – Freedom">5</div> 
</div>

先謝謝您的任何答覆。

來源

2013-06-25 user2521981

$((this).attr('target')).show();

這在語法上是不正確的。它應該是$($(this).attr('target'))

但是，這也不好，因爲this是沒有目標的錨元素。使用$(this).closest('li').attr('target')（或將目標添加到<a>）。

這也是語義上不正確，因爲它會內插到$("red")，它會嘗試查找<red>元素。

$("." + $(this).closest('li').attr('target'))

http://jsfiddle.net/WHpXz/5/

來源

2013-06-25 23:25:18

你幾乎沒有。這是需要調整的行：$((this).attr('target')).show();

$(this)實際上是指被點擊的當前錨標記。由於錨標記沒有目標屬性，因此您需要轉到父項。

從那裏，你可以得到目標，並添加'。'到用作選擇器的顏色。

var catToShow = $(this).parent().attr('target'); 
$('.' + catToShow).show();

我編輯了你的小提琴。試一試。

http://jsfiddle.net/juicycreative/WHpXz/4/

來源

2013-06-25 23:29:30

基於CSS類的選擇性顯示/隱藏難點

回答

相關問題