Что такое синтаксис селектора 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/

спасибо !!

Джонатан

Answer 1

Рассматривая исходный код, у вас есть два отдельных 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> 

Answer 2

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