2

Targetという空のDivを取得しました：

<div id="target"></div>

そしてリストと呼ばれるdiv：

<div id="list">
    <ul>
        <li><img id="1" src=".." /></li>
        <li><img id="2" src=".." /></li>
        <li><img id="3" src=".." /></li>
    </ul>
</div>

私が欲しいのは、ユーザーがクリックすると、imgをdivターゲットに入れ、彼のサイズをもっと大きなものに調整することです。私はこれを簡単に行うことができます。
問題は、ユーザーが別のdivまたは別のボタン（他の場所の矢印または次のボタン）をクリックした場合に、最初のdivを元の場所に戻し、新しいdiv（またはリスト内の次のdiv）に置き換える場合に発生します。表示されている最後のdivの場合は1番目）。
私はいくつかの方法を試しましたが、私のjQueryはまだ十分ではありません。

（誰かが尋ねる前に、すべてがローカルであり、これが何かを変更してもサーバー側ではありません）

4

4 に答える 4

3

これが最善の方法なのか、それとも効率的な方法なのかはまったくわかりませんが、必要なことを実行しているようです。

デモ：クローンの使用 

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var hiddenImage = $("ul li img[hidden='hidden']");

    $("#target").html("");
    currentImage.clone().appendTo('#target');

    hiddenImage.removeAttr("hidden");
    currentImage.attr("hidden", "hidden");
});​

コメントによると、要素のいくつかはビデオファイルである可能性があります。使用する代わりにclone()、要素を移動してプレースホルダーを残すことができます。

デモ：プレースホルダーの使用

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var lastImage = $("#target img");
    var placeHolder = $("#last-image-position");

    lastImage.insertBefore("#last-image-position");
    $("#last-image-position").remove();

    $("<div id='last-image-position'><div>").insertBefore(currentImage);

    currentImage.appendTo('#target');
});​


更新されたデモを実際の画像で編集します。

于 2012-06-18T23:49:18.713 に答える
3

divコンテンツを交換する作業デモ：http： //jsfiddle.net/BKNjB/2/

私が間違っているかどうか教えてください。:)

動作-2つのアラートがbeforeありafter、残りは病気の方が理にかなっています。

または、次のようになります：http: //jsfiddle.net/vJTyf/6/ または、画像をクリックするたびに画像を交換するために、このような画像を交換します：http: //jsfiddle.net/vJTyf/9/（はい、できます）よりきちんとした方法でそれを行います:)

コード

$(document).ready(function() {
    alert(' Before swap HTML in target is :==> ' + $('#target').html());

        var targetHtml = $('#target').html();
        var listHtml = $('#list').html();

        $('#target').html(listHtml);
        $('#list').html(targetHtml);

    alert(' After swap HTML in target is :==> ' + $('#target').html());

});​
于 2012-06-18T23:56:47.363 に答える
2

多分あなたはこれを意味しました：

$('#target').replaceWith($('#list'));
于 2012-06-18T23:45:58.930 に答える
1

あなたはこれが欲しいかもしれません

$(function(){
    $('#list li').on('click', 'img', function(e){
        var img=$(this);
        $('#target').html(img.clone()) .width(img.width()).height(img.height());
    });

    $('#target').on('click', function(e){
        $(this).html('').prop('title', '').width(200).height(200); // original size
    })
    .on('mouseenter', function(e){
        if($(this).html()!='') $(this).prop('title', 'Click to clear');
    })
    .on('mouseleave', function(e){
        $(this).prop('title', '');
    });            
});

デモ。

更新:(あなたが求めた）

$(function(){
    $('#list li').on('click', 'img', function(e){
        if($('#target').html()!='')
        {
            $('#list ul li:empty').html($('#target').html());
        }
        var img=$(this);
        $('#target').html(img).width(img.width()).height(img.height());
    });

    $('#target').on('click', function(e){
        $('#list ul li:empty').html($('#target').html());
        $(this).html('').prop('title', '').width(200).height(200);
    })
    .on('mouseenter', function(e){
        if($(this).html()!='') $(this).prop('title', 'Click to clear');
    })
    .on('mouseleave', function(e){
        $(this).prop('title', '');
    });            
});

デモ。

于 2012-06-19T00:47:22.983 に答える