0

我有这个密码笔 -

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

当您选择一个图像时，写一些文本并单击“预览”一个带有图像和文本的灯箱。

我的问题是，如果用户然后关闭灯箱并选择不同的图像，那么两个图像都会出现。我不想在关闭灯箱时删除文本/图像（这是最简单的选择）。

我还注意到，如果您多次单击选择按钮，它会“中断”并给出带有“选择”字样的蓝色背景。不知道如何解决。

任何帮助将非常感激。

提前致谢。

编辑，添加代码（很抱歉没有这样做开始）......

将类添加到所选图像的代码，这为单词“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;
  });

有了这两个，我需要弄清楚如果我两次单击相同的元素，如何更改删除“选定”类。此外，如果我单击一个然后单击另一个图像，我想交换附加的图像，删除第一个图像并将其替换为新的选择。

我希望这在星期天早上有意义。

4

1 回答 1

0

您正在使用appendTo()很可能将图像附加到灯箱而不是更新它。尝试使用attr("src")更新源而不是追加新的。

于 2013-10-27T09:34:30.780 回答