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

失败的是，您在点击功能中再次选择所有元素，只需参考$(this)

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

所有子元素都在变化，只希望单击其父元素的div子元素发生变化。

2 个答案: