0

私は多くのチュートリアルを読みましたが、正しく理解できないようです。まったく同じ要素に対して何かを行っているときにjqueryクリック機能が機能することはわかっていますが、どのようにして別の要素に影響を与えて元に戻すのですか?

メニューがあり、項目をクリックすると背景 (本文) が画像に変わります。

例: HTML

<body>
<ul class="menu"> 
  <li class="menu-item"><a>item 1</a></li>
  <li class="menu-item"><a>item 2</a></li>
  <li class="menu-item"><a>item 3</a></li>

</ul>
</body>

Jクエリ

$(".menu-item a").click(function () {
  $(body).css('background', 'http://example.com/image.png'); <-- first menu item
  $(body).css('background', 'http://example.com/image.png'); <-- second menu item
  $(body).css('background', 'http://example.com/image.png'); <-- third menu item
   });
4

5 に答える 5

1

使用できます.index()-デモ

$("a").on("click", function(e) {
  e.preventDefault();

  var i = $("li").index( $(this).parent() );

  if ( i === 1 ) {
    $('body').css('background', 'beige');
  } else if ( i === 2 ) {
    $('body').css('background', 'honeydew');
  } else {
    $('body').css('background', 'pink');
  }

});
于 2013-01-14T19:01:51.343 に答える
0

あなたが何をしようとしているのかわかりませんが、ヒントを与えることができます。

$(".menu-item a") // is an array/jquery collection of all elements that match the selector
    .click(function () { // binds the function now to the click event of every item found
        $(this); // is now the currently clicked element
        // you can now traversal with $(this) for example
        $(this).siblings(); // will be a collection of all surrounding elements
        $(this).next(); // is the next element after the current one, can be chained like:
        $(this).next().next(); // but I wouldn't recomand
        $(this).prev(); // same as next but prev
        $(this).parent(); // selects the direct parent element, in your case the li element
        $(this).children(); // would select the direct children of the current element
        // and so on.... there are much more possibilities
        // on every of this possibilities you can do your background change
        $("some selector"); // is of course still possible

        // i think you are trying to do this:
        var menuItems = $(".menu-item a");
        menuItems.eq(0).css("background", "url to bg 1");
        menuItems.eq(1).css("background", "url to bg 2");
        menuItems.eq(2).css("background", "url to bg 3");
    })

jQueryドキュメントのトラバースセクションを見てください。また、jQueryが実際に何をしているのかを常に確認することをお勧めします。多くの人がjQuerysAPIの背後に隠れており、何が起こっているのかわかりません。これは多くの誤解を招きます。

于 2013-01-14T19:08:45.990 に答える
0

これは、あなたがやろうとしていることのように見えますか?

$(".menu-item a:nth-child(1)").click(function () { // first menu item
    $(body).css('background', 'http://example.com/image.png');
});
$(".menu-item a:nth-child(2)").click(function () { // second menu item
    $(body).css('background', 'http://example.com/image.png');
});
$(".menu-item a:nth-child(3)").click(function () { // third menu item
    $(body).css('background', 'http://example.com/image.png');
});
于 2013-01-14T19:00:43.850 に答える
0

これについて私が提案する方法は、クリックされた要素の位置を取得することです。他のポスターが提案したように、jQuery の index() 関数を使用してこれを行うことができます。これは、位置のカウントが 1 ではなく 0 から始まることを意味する、位置のゼロベースのインデックスを提供することを覚えておいてください。

クリックされたアイテムに基づいて、提供されたサンプル コードに基づいて、body 要素であるターゲット アイテムに CSS クラスを割り当てます。

また、あなたの JS コメントは、編集されてもまだ無効であることに気付きました。JS の 1 行のコメントは 2 つのスラッシュを使用しますが//、複数行のコメントは で始まり、/*で閉じられ*/ます。

これが私の解決策です: http://jsfiddle.net/tgZUK/。

于 2013-01-14T19:55:09.053 に答える
0

あなたはこのようなことを試すかもしれません

HTML: 

<body>
  <ul class="menu">
    <li class="menu-item"><a name="blue" href="#">item 1</a></li>
    <li class="menu-item"><a name="red" href="#">item 2</a></li>
    <li class="menu-item"><a name="orange" href="#">item 3</a></li>
 </ul>
</body>

CSS:

  .red {
    background:red;
  }
  .blue {
     background:blue;
  }
  .orange {
    background:orange;
 }

Jクエリ:

$('.menu').on('click', 'a', function () {
  var bgColor = $(this).attr('name');
   $('body').removeClass().addClass(bgColor);
   return false;
 });

デモ

于 2013-01-14T19:27:07.697 に答える