что такое синтаксис селектора jquery, чтобы выбрать этот элемент LI

Question

Мне нужно выбрать каждый элемент списка и изменить фоновое изображение родительского div homepagecontainer, но я даже не могу выбрать элемент 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>

Это URL сайта: -

http://www.thebalancedbody.ca/

Большое спасибо !!

Jonathan

Answer 1

Ваш скрипт не выглядит неправильно, но, похоже, он не на своем месте. Поместите это в jQuerys готовый обработчик , чтобы убедиться, что все элементы, к которым вы хотите получить доступ, загружены.

$(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 () . Может быть оптимизирован, будучи более конкретным. Если это идентификатор, вы можете просто использовать $('#homepagecontainer').css('background-image', 'url');, поскольку идентификаторы должны быть уникальными в допустимых разметках 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>