9

ここに私のHTMLがあります:

<div class="large">
    <img src="/images/photos/Interior.jpg" alt="The interior" style="[...]" />
    <div class="caption">The interior</div>
</div>
<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" style="[A different ...]" />
    <div class="caption">A bedroom</div>
</div>

をクリックするdiv.smallと、画像とキャプションの両方でコンテナーの div を交換したいと思います。問題は、保持する必要がある一連のインライン スタイル セットがあるため、src を単に交換できないことです。最後に、画像が交換されたら、カスタム関数.fitToParent()を両方に適用したいと思います。

どうすればこれを行うことができますか？

4

3 に答える 3

16 
$(document).ready(function() {
    $('div.small').click(function() {
        var bigHtml = $('div.large').html();
        var smallHtml = $(this).html();

        $('div.large').html(smallHtml);
        $('div.small').html(bigHtml);

        //custom functions?
    });
});
于 2009-09-04T18:27:35.390 に答える
1 
function swapContent(){
   var tempContent = $("div.large").html();
   $("div.large").empty().html($("div.small").html());
   $("div.small").empty().html(tempContent);   
}

<div class="large">
    <img src="/images/photos/Interior.jpg" alt="The interior" style="[...]" />
    <div class="caption">The interior</div>
</div>
<div class="small" onclick="swapContent()">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" style="[A different ...]" />
    <div class="caption">A bedroom</div>
</div>

それが役に立てば幸い。

于 2009-09-04T18:36:46.900 に答える
0

マークアップを少し変更します。

<div id="large">

<div id="small">

そして、Javascriptで次のことができます：

var swap = function(fromId, toId){
    var temp = $(toId).html();
    $(toId).html($(fromId).html());
    $(fromId).html(temp);
}

もちろん、それはクリーンアップできますが、アイデアはわかります。

于 2009-09-04T18:28:16.277 に答える