0

我已经阅读了很多教程，但似乎无法正确理解。好的，我知道当您对完全相同的元素执行某些操作时，jquery click 功能有效，但是您如何使其影响另一个元素并切换回来？

我有一个菜单，当我单击一个项目时，我希望背景（正文）更改为图像。

示例：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>

查询

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

});
于 2013-01-14T19:01:51.343 回答
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

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

$(".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 实际在做什么。许多人躲在 jQuerys api 后面，不知道发生了什么。这导致了很多误解。

于 2013-01-14T19:08:45.990 回答
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;
 }

查询：

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

演示

于 2013-01-14T19:27:07.697 回答
0

我建议这样做的方法是获取已单击元素的位置。您可以通过使用 jQuery 的 index() 函数来做到这一点，正如其他海报所建议的那样。请记住，这将为您提供一个从零开始的位置索引，这意味着位置计数从 0 开始，而不是 1。

根据已单击的项目，您根据您提供的示例代码将 CSS 类分配给作为主体元素的目标项目。

另外，我注意到您的 JS 评论即使被编辑过仍然无效。JS 中的单行注释使用双斜杠，//而多行注释/*以*/.

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

于 2013-01-14T19:55:09.053 回答