Question

我有4盒div标签，每个标签都有不同的div。通过jQuery我想让点击的div的第二个孩子突出显示或改变它的颜色。此外，每个父div都有一个隐藏的div，在点击父div后，子div显示。我做了类似于我想要的东西但是在点击了一个div之后，它也在其他父div上进行了操作。看看演示，看看我的意思。

http://jsfiddle.net/e3TeY/

这是我的JS代码

$(document).ready(function(){
    $(".close").hide();
    $("div").click(function(){
        var classname = $(this).parent();
        alert(classname);
        $(classname).children(':first-child').next().css("color","white");
        $(classname).find(".close").show();
    });
});

HTML：

<div class="item1">
    <div class="name1">name 1</div>
    <div class="name2">name 2</div>
    <div class="name3">name 3</div>
    <div class="close">close</div>
</div>
<div class="item2">
    <div class="name4">name 1</div>
    <div class="name5">name 2</div>
    <div class="name6">name 3</div>
    <div class="close">close</div>
</div>
<div class="item3">
    <div class="name7">name 1</div>
    <div class="name8">name 2</div>
    <div class="name9">name 3</div>
    <div class="close">close</div>
</div>
<div class="item4">
    <div class="name10">name 1</div>
    <div class="name11">name 2</div>
    <div class="name12">name 3</div>
    <div class="close">close</div>
</div>

那么你是否有任何想法让它只对选定的父div进行操作（改变其第二个孩子的颜色并显示其隐藏的div子）？

Answer 1

而不是定位所有div：

$("div").click(function(){

您可以使用 starts with ^*属性来定位div类的预期name：

$("div[class^=name]").click(function(){

<强> Updated Fiddle

Answer 2

这是一个干净的解决方案。最好为父div item

定义一个公共className

<div class="item item1">
    <div class="name1">name 1</div>
    <div class="name2">name 2</div>
    <div class="name3">name 3</div>
    <div class="close">close</div>
</div>

$(document).ready(function(){
    $(".close").hide();
    $("div.item > div").click(function(){
        $(this).parent().find("div:nth-child(2)").css("color","white");
        $(this).parent().find(".close").show();
    });
});

http://jsfiddle.net/ergec/2PjbP/

Answer 3

我非常喜欢在这些情况下使用jQuery的toggleClass()方法。

您需要稍微编辑HTML和CSS，
但是使用这种方法你可以切换'white＆amp;关闭'开/关。

示例： http://jsfiddle.net/e3TeY/6/

HTML

<div class="item1 box">  
    <div class="name1">name 1</div>  
    <div class="name2 color">name 2</div>  
    <div class="name3">name 3</div>  
    <div class="close hidden">close</div>
</div>

<强> CSS

.white {color:white;}
.hidden {display:none;}
.yes {display:block;}

jQuery （已撤消提醒）

$(document).ready(function(){
 $(".box").click(function(){
  var classname = $(this).parent();         
  $(this).find("div:nth-child(2)").toggleClass('white');            
  $(this).find("div:nth-child(4)").toggleClass('yes');
 });
});

为什么这个父元素也会选择其他元素？

3 个答案: