点击时用jquery替换内部html

Question

我想改变旋转木马外面的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);
    });
});

Answer 1

首先,考虑得到适当.title和.description元素的每个点击.slideItem的元素.最后,使用html()方法替换内部HTML:

$(".slideItem").click(function() {
    var title = $(this).find(".title").html();
    var desc = $(this).find(".description").html();
    $("#selected-title").html(title);
    $("#selected-description").html(desc);
});