5

我不确定我的措辞是否正确。但我有一个与此类似的 HTML 文档设置。

<div id="intro_page" class="sub_page">

        <div class="sub_header"><img src="assets/img/intro_header.jpg" /></div>

        <div class="video_holder">
            <video class="video_player"></video>
        </div>

        <div class="page_text"><img src="" width="1020" /></div>


</div><!-- /intro_page -->

和

<div id="spark_page" class="sub_page car_page">

            <div class="sub_header"><img src="assets/img/header.jpg" /></div>

            <div class="video_holder">
                <video class="video_player"></video>
            </div>

            <ul class="car_story">
                <li data-text="story1_text"><img src="assets/img/story1_btn2.jpg" /></li>
                <li><img src="assets/img/story2_btn2.jpg" /></li>
                <li><img src="assets/img/story3_btn2.jpg" /></li>
            </ul>


            <div class="page_text"><img src="" width="1020" /></div>

</div><!-- /spark_page -->

如果有人page_text点击car_story li. 但是因为有两个 div 有page_text，我不知道如何定位与car_story ul. 希望这是有道理的。谢谢！

我尝试过类似的事情，但没有运气。

$(".car_story li").click(function() {

    $(this).parent().find(".page_text img").attr("src","newimage.jpg");

});
4

4 回答 4

11

传入最近的 div.sub_page 作为选择器中的上下文，然后是要查找的元素

$(".car_story li").click(function() {
    var parent = $(this).closest('.sub_page'); // find closest sub_page
    $(".page_text img",parent).attr("src","newimage.jpg"); // find img inside of closest sub_page
});
于 2012-11-13T16:38:10.907 回答
2 
$(".car_story li").click(function() {
    $(this).parents("div").find(".page_text > img").attr("src","newimage.jpg");
});
于 2012-11-13T16:27:59.433 回答
1

尝试closest()

$(".car_story li").click(function() {

    $(this).closest('.sub_page').find(".page_text img")
                                .attr("src","newimage.jpg");

});
于 2012-11-13T16:39:04.653 回答
0

这具有相同的结果，但我认为更清楚的是在所有情况下你会得到什么结果（例如，如果你有另一个页面可能 ajaxed 也恰好有一个带有 car_story 类的 li 那么这个点击事件将仍然只为 spark_page 开火。）：

$(".car_story li").click(function() {
    $('div#spark_page').find(".page_text img").attr("src","newimage.jpg");
});

当然，如果您要使用 li car_story 将更多 html ajax 并想更改所有 .page_text img 的来源，那么我认为您可以这样做

$(".car_story li").click(function() {
    $(".page_text img").attr("src","newimage.jpg");
});
于 2013-03-26T15:58:11.610 回答