Question

我已阅读了很多教程，似乎无法正确使用。好的，我知道当你对完全相同的元素做某事时，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>

JQUERY

$(".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
   });

Answer 1

您可以使用.index() - DEMO

$("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');
  }

});

Answer 2

这看起来和你想做的一样吗？

$(".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');
});

Answer 3

我不知道你在尝试什么，但我可以给你提示。

$(".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文档的Traversing部分。我也总是建议看看jQuery实际上在做什么。许多人躲在jQuerys api后面，不知道发生了什么。这导致了许多误解。

Answer 4

您可以尝试这样的事情

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

Jquery的：

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

DEMO

Answer 5

我建议的方法是抓住已被点击的元素的位置。您可以通过使用jQuery的index（）函数来完成此操作，就像其他海报所建议的那样。请记住，这将为您提供一个从零开始的位置索引，这意味着位置计数从0开始而不是1.

根据已单击的项目，根据您提供的示例代码，将CSS类分配给目标项目，该项目是body元素。

另外，我注意到你的JS评论即使被编辑也仍然无效。 JS中的单行注释使用双正斜杠//，而多行注释以/*开头，并由*/关闭。

这是我的解决方案：http://jsfiddle.net/tgZUK/。

jquery - 单击菜单项或其他元素将更改正文背景图像

5 个答案: