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

Question

试图获取 parent 的 child <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");