0

私はこのコードペンを持っています -

http://codepen.io/sturobson/pen/3f1cd0077301489290d9e5a6e40077b7

画像を選択してテキストを書き、「プレビュー」をクリックすると、画像とテキストが表示されたライトボックスが表示されます。

私の問題は、ユーザーがライトボックスを閉じて別の画像を選択すると、両方の画像が表示されることです。ライトボックスを閉じるときにテキスト/画像を削除したくありません（これが最も簡単なオプションです）。

また、選択ボタンを数回クリックすると、「壊れて」青色の背景に select という単語が表示されることに気付きました。それを修正する方法がわからない。

どんな助けでも本当に感謝しています。

前もって感謝します。

編集、コードの追加 (最初からこれを行わなかったことをお詫びします)...

選択した画像にクラスを追加するコード。これにより、「select」という単語に青色の背景が与えられ、画像が別の div に複製されます。

  $('.selectable-image').on("click", function() {
    $('.selectable-image.selected').removeClass('selected');
    $(this).addClass('selected');
        $(".previewimage img").remove();
        $(".selected > img").first().clone().appendTo(".preview-image");

    return false;
  });

このコードは、クリックに応じて選択または選択する単語を変更します

  $('.selectable-image').on("click", function() {
    $('.select-photo', this).text(function(_, oldText) {
        return oldText === 'SELECTED' ? 'SELECT' : 'SELECTED';
    }).parent().siblings().find('.select-photo').text(function(){
        return $(this).data('text');
    })
    return false;
  });

これら 2 つを使用して、同じ要素を 2 回クリックした場合に「選択した」クラスを削除する方法を理解する必要があります。また、ある画像をクリックしてから別の画像をクリックすると、追加された画像を交換し、最初の画像を削除して新しい選択に置き換えたいと思います。

日曜日の朝にそれが理にかなっていることを願っています。

4

1 に答える 1

0

appendTo()画像を更新するのではなく、ライトボックスに追加する可能性が非常に高いものを使用しています。attr("src")新しいソースを追加するのではなく、を使用してソースを更新してみてください。

于 2013-10-27T09:34:30.780 に答える