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誰かが をクリックした場合、div をターゲットにしようとしていcar_story liます。しかし、 を持つ div が 2 つあるためpage_text、 と同じ親 div にあるものをターゲットにする方法がわかりません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

これは同じ結果になりますが、すべての場合にどのような結果が得られるかについては、より明確だと思います (たとえば、別のページで ajax された可能性があり、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 に答える