Question

我需要选择每个列表项并更改父div主页容器的背景图像，但我甚至无法在脚本中选择li元素。这是代码：

<div class="transparent" id="programmesbox">
<ul id="frontpage">
<?php 
query_posts('showposts=20&post_parent=7&post_type=page'); 

if (have_posts()) : while (have_posts()) : the_post();
?>

<li id="<?php the_id() ?>" ><a class="sprite" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>

</ul>
</div>

我需要做这样的事情

    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $('#frontpage li a').hover(function() {
    alert('here');
//CHANGE BACKGROUND IMAGE OF 'homepage_container' to different image depending on which list item is hovered over
    }

    );


    </script>

这是网站的网址： -

http://www.thebalancedbody.ca/

非常感谢!!

乔纳森

Answer 1

您的脚本看起来没错，但看起来好像错过了。将其放入jQuerys ready handler以确保您要访问的所有元素都已加载。

$(document).ready(function(){
    $('#frontpage').find('a').hover(function() {
       $(this).closest('.homepage_container').css('background-image', 'some_image_url_here');
    }, function() {
       // mouseleave code here
    }); 
});

在您的示例中，我无法确定homepage_container相对于锚点的位置，因此我使用了.closest()函数。可以通过更具体的方式进行优化。如果是ID，则可以使用$('#homepagecontainer').css('background-image', 'url');，因为ID必须在有效的HTML标记中是唯一的。

Answer 2

查看源代码，在正文中有两个单独的JS调用，并且还调用了两次jQuery。

我建议你把所有的JS放在页面的顶部或底部，只需要调用一次jQuery。

至于你的选择，在你做出这些改变之后，试试这个，

<script type="text/javascript"> 
$(document).ready(function(){
  $("#contact").click(function(event){
     event.preventDefault(); //stops the browser from following the link

     $("#contactable").click(); //opens contact form
     alert("Showing mycontactform"); //remove this whenit's working
  });

  $("ul#frontpage li a").hover(
   function () {
     $('#homepage_container').css('background-image', 'url(image1.jpg)');
     },function () {
     $('#homepage_container').css('background-image', 'url(image2.jpg)');
     }
    );
});   
</script>

什么是jquery选择器语法来选择此LI项

2 个答案: