1

<div>親の子を変えさせようとする。ページには合計 5 つのパネルがあり、親の 1 つをクリックすると、すべてのパネルのすべての子が変更されます。

以下のコードに加えて、ここにアップロードしました: http://intp.co/dev

Jクエリ:

    <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);
}
4

2 に答える 2

4

これ$("div.click > img")は、コンテキストに依存しないためです。実行する場所に関係なく、ドキュメント内のこのセレクターに適用されるすべての要素を選択するだけです。

適切な要素を選択するには、トラバーサル関数を使用して、特定の要素から開始し、DOMをトラバースすることができます。thisクリックされたdiv.click要素であることを忘れないでください。

$(this).children("img").toggleClass("rotated");
于 2012-10-12T10:13:02.730 に答える
0

失敗は、クリック関数内ですべての要素を再度選択していることです。参照してください。$(this)

<script>
  $("div.click").click(function() {
    $(this).children("img").toggleClass("rotated");
  }); 
</script>
于 2012-10-12T10:13:11.067 に答える