0

我正在研究一个 js 脚本，它将显示/隐藏基于 css 类的多个 div，看起来很简单。我开始寻找这方面的一个例子，并在下面链接的文章中找到了一些接近的东西。我使用以下链接中的代码作为起点。

使用 JavaScript 显示/隐藏多个 div

在我修改后的代码（如下所示）中，我能够隐藏所有（错误）并显示所有（正常工作。我不确定为什么它没有正确定位 CSS 类“红色、绿色或蓝色”。如果我hard 脚本中的类名之一它按预期工作，所以我相当确定我在引用 css 目标本身的方式上遇到了问题。

我能够隐藏所有并显示所有，但我很难只显示选定的课程。

这是我正在使用的 jsFiddle：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>

提前感谢您的任何回复。

4

2 回答 2

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

这在语法上是不正确的。它应该是$($(this).attr('target'))

但是，这也不好，因为this锚元素没有目标。使用$(this).closest('li').attr('target')（或将目标添加到<a>）。

这在语义上也是不正确的，因为它会插入到$("red")which 会尝试寻找一个<red>元素。

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

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

于 2013-06-25T23:25:18.700 回答
0

你快到了。这是需要调整的行：$((this).attr('target')).show();

$(this)实际上是指当前被点击的锚标签。由于锚标记没有目标属性，因此您需要上到父级。

从那里，您可以获取目标并添加“。” 到用作选择器的颜色。

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

我已经编辑了你的小提琴。试一试。

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

于 2013-06-25T23:29:30.950 回答