2

我是一个完整的 jQuery 初学者，但是，我正在尝试创建一段在单击缩略图时显示描述的代码。我设法让它工作，以便它显示属于每张图片的尊重描述，并创建一个功能关闭按钮。

但是当我使用缩略图关闭描述时（使用了切换方法），如果我再次打开该图片的描述，按钮就会成倍增加。

我知道这样做是因为每次打开描述窗口时代码都会附加按钮，但不知道如何防止这种情况发生。我试图寻找一个可能的解决方案，但没有想出与我的问题类似的任何东西..

这是我正在使用的 jQuery 代码：

$(document).ready(function() {
    $('.thumbnails li img').click(function() {
        var thumbSplit = $(this).attr('id').split('_');
            identName = $('#cont_' + thumbSplit[1]);

        identName.toggle();
        $('.content-window').not(identName).hide();

        var closeButton = $('<button class="close">close</div>');
        closeButton.appendTo(identName.not(':hidden'));
        closeButton.click(function() {
            $(this).parents('.content-window').hide();
            closeButton.remove();
        });
    });
});

这是一个 JSFiddle 链接：http: //jsfiddle.net/thosetinydreams/4r8QP/4/

4

2 回答 2

2

每次单击其中一个图像时，都会动态创建关闭按钮。有几种方法可以避免这个问题。

  • 每次你在点击事件中，在添加之前删除所有现有的按钮。
  • 不要动态添加按钮 - 只需将它们添加到 html 中。

我倾向于第二个，因为它更干净。

让我看看我是否可以修复小提琴...

这里是移动按钮的小提琴。我做了我提到的更改，并将$('.close').click函数移动如下：

$(document).ready(function() {
$('.thumbnails li img').click(function() {
    var thumbSplit = $(this).attr('id').split('_'),
        identName = $('#cont_' + thumbSplit[1]);

    identName.toggle();
    $('.content-window').not(identName).hide();
});
$('.close').on("click", function() {
        $(this).parents('.content-window').hide();
        closeButton.remove();
    });
});

这是我的第一个建议的小提琴，这真的还不错。在您的点击功能中，我检查是否有任何现有的 .close 类。如果有，我只是将它附加到你想要的区域，所以它和它的点击事件只创建一次：

$('.thumbnails li img').click(function() {
    var thumbSplit = $(this).attr('id').split('_');
        // descrSplit = $('.descriptions').find('.content-window').attr('id').split('_'),
        identName = $('#cont_' + thumbSplit[1]);

    identName.toggle();
    $('.content-window').not(identName).hide();

    var closeButton = $('.close');
    if (closeButton.length == 0) {
        closeButton = $('<button class="close">close</div>');
        closeButton.click(function() {
            $(this).parents('.content-window').hide();
            closeButton.remove();
        });
    }
    closeButton.appendTo(identName.not(':hidden'));
});
于 2013-11-05T22:36:49.867 回答
1

只需更改此行

 closeButton.remove();

对此

$(this).remove();
于 2013-11-05T22:39:57.997 回答