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

on click of menu item or another element will change body background image

本文关键字：改变 正文 背景 图像 元素 菜单项 其他 单击      更新时间：2023-09-26

我已经读了很多教程，但似乎总是做不好。我知道当你对同一个元素进行操作时，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
   });

您可以使用.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');
  }
});

这看起来像你想做的吗?

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

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

$(".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到底在做什么。许多人躲在jquery的api后面，不知道发生了什么。这就造成了许多误解。

您可以尝试这样做

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

我建议的方法是获取已被单击的元素的位置。你可以使用jQuery的index()函数，就像其他发帖者建议的那样。记住，这将给你一个从零开始的位置索引，这意味着位置计数从0开始，而不是1。

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

另外，我注意到你的JS评论仍然是无效的，即使他们被编辑。JS中的单行注释使用双斜杠，//，而多行注释以/*开始，以*/结束。

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

相关文章：