基于 CSS 类的选择性显示/隐藏困难答案

【问题标题】：Difficulty with selective show/hide based on CSS class基于 CSS 类的选择性显示/隐藏困难
【发布时间】：2013-06-25 23:18:27
【问题描述】：

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

Show/hide multiple divs using JavaScript

在我修改后的代码（如下所示）中，我能够隐藏所有（错误的）并显示所有（正常工作。我不确定为什么它没有正确定位 CSS 类“红色、绿色或蓝色” . 如果我在脚本中使用其中一个类名，它会按预期工作，所以我相当肯定我在引用 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>

提前感谢您的任何回复。

【问题讨论】：

标签： javascript jquery css show-hide

【解决方案1】：

$((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/

【讨论】：

【解决方案2】：

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

$(this)实际上是指当前被点击的锚标签。由于anchor标签没有target属性，所以需要上到parent。

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

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

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

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

【讨论】：