Question

我是一个完整的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/

Answer 1

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

每次进入点击事件时，请先删除所有按钮，然后再添加一个按钮。
不要动态添加按钮 - 只需将它们添加到html中。

我倾向于第二，因为它更清洁。

让我看看我能否找到小提琴......

HERE是移动按钮的小提琴。我做了我提到的更改，并将$('.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();
    });
});

HERE是我的第一个建议的小提琴，真的不是那么糟糕。在你的点击功能中，我检查是否有任何现有的.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'));
});

Answer 2

只需更改此行

 closeButton.remove();

到这个

$(this).remove();

如何防止按钮倍增？

2 个答案: