jquery - 所有子元素都在变化，只希望父被点击的div子元素发生变化。

Question

试图让父母的孩子<div>改变。页面上总共有 5 个面板，当我单击其中一个父级时，所有面板的所有子级都会更改。

除了下面的代码，我在这里上传了它：http: //intp.co/dev

jQuery：

    <script>
        $("div.click").click(function() {
        $("div.click > img").toggleClass("rotated");
        }); 
    </script>

的HTML

    <div class="panel">
        <div class="expander2 click">
            <img src="images/chev.png">
        </div>
        <h1>The Best Header Sample Text</h1>
    </div>
    <div id="segment2">
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>

CSS

.click img
{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    margin-top:34px;
    margin-right:22px;
}

img.rotated 
{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}

Answer 1

这是因为$("div.click > img")它与上下文无关 - 它只选择文档中适用于此选择器的所有元素，无论您在何处执行它。

要选择合适的元素，您可以使用遍历函数，从某个元素开始，然后遍历 DOM。请记住，这this是单击的div.click元素，因此：

$(this).children("img").toggleClass("rotated");

Answer 2

失败是，您在 click 函数中再次选择所有元素，只需参考$(this)

<script>
  $("div.click").click(function() {
    $(this).children("img").toggleClass("rotated");
  }); 
</script>