0

カルーセル外のDIVの内容を変更したい。

カルーセルDIVをクリックすると、非表示のDIVからコンテンツが取得され、カルーセルの外側にある他のDIVで同じものが置き換えられます。このようなものを作成するものがいくつかあります。選択するとタイトルと説明がどのように変化するかを確認してください。http://bqworks.com/products/3d-carousel/example2.html

HTML

<div class="carousel"> <!-- BEGIN CONTAINER -->     
    <div class="slides"> <!-- BEGIN CAROUSEL -->
        <div class="slideItem">
            <a href="#">
                <img src="images/cars/orange.png" />
            </a>
            <p class="title">The HEAD 1</p>
            <p class="description">Some big big paragraph 1</p>
        </div>

        <div class="slideItem">
            <a href="#">
                <img src="images/cars/covered.png" />
            </a> 
            <p class="title">The HEAD 2</p>
            <p class="description">Some big big paragraph 2</p>
        </div>

        <div class="slideItem">
            <a href="#">
                <img src="images/cars/orange.png" />
            </a>
            <p class="title">The HEAD 3</p>
            <p class="description">Some big big paragraph 3</p>
        </div>
    </div> <!-- END SLIDES -->
</div><!-- carousel END -->

<div id="text">    
    <p id="selected-title">THIS SHOULD GET TITLE FROM ABOVE</p>    
    <p id="selected-description">Description of the selected item</p>    
</div>

jQuery

$(document).ready(function(){       
    $(".slideItem").click(function() {
        var title = $('.title').html();
        var desc = $('.description').html();
        $('#text #selected-title').html.replace(title);
        $('#text #selected-description').html.replace(desc);
    });
});
4

3 に答える 3

7

まず、クリックした要素ごとに適切な要素を取得すること.titleを検討してください。最後に、メソッドを使用して内部HTMLを置き換えます。.description.slideItemhtml()

$(".slideItem").click(function() {
    var title = $(this).find(".title").html();
    var desc = $(this).find(".description").html();
    $("#selected-title").html(title);
    $("#selected-description").html(desc);
});
于 2012-10-31T11:26:52.943 に答える
1

これを使って：

$('#text #selected-title').html(title);
$('#text #selected-description').html(desc);

使用法を追加したい場合は、これがhtmlに置き換わります.append(title);

于 2012-10-31T11:26:23.403 に答える
0

これを行うだけです

$('#text #selected-title').html(title);
$('#text #selected-description').html(desc);

replaceコンテンツを置き換えるためにメソッドを使用する必要はありません

于 2012-10-31T11:26:49.240 に答える