Question

我使用jQuery工作，隐藏并显示图像，让<div>中的某些内容显示出来。问题是，即使我成功隐藏图像然后更改与按钮关联的类以便能够调用show()功能，图像也不会重新出现。这是我到目前为止编写的代码（不起作用）：

$('.viewVideo').click(function(){
    var wood = $(this).attr('id');
    var current = '.' + wood + 'Image';
    console.log(current);
    $(current).hide();
    $('.viewVideo').removeClass('viewVideo').addClass('viewPhoto');
});

$('.viewPhoto').click(function(){
    var wood = $(this).attr('id');
    var current = '.' + wood + 'Image';
    $(current).show();
    console.log(current);
    $(current).show();
    $('.viewPhoto').removeClass('viewPhoto').addClass('viewVideo');
});

Answer 1

您希望将on触发器用于动态更改的元素（在本例中为您的类）。

$('.parent_element').on('change','.viewPhoto', function(){
    // do something
});

在此处详细了解此信息：http://api.jquery.com/on/ 它让我很难过头痛！

Answer 2

您需要使用on()事件，而不是尝试将click()事件绑定到.viewPhoto类。

.on（）方法将事件处理程序附加到当前选定的集合 jQuery对象中的元素。

将您的代码更改为;

$(document).on('click', '.viewPhoto', function(){
    var wood = $(this).attr('id');
    var current = '.' + wood + 'Image';
    $(current).show();
    console.log(current);
    $(current).show();
    $('.viewPhoto').removeClass('viewPhoto').addClass('viewVideo');
});

这是因为当您尝试将click事件绑定到.viewPhoto时，它不存在，因为它是动态添加/创建的。但是，您可以将其绑定到您的文档，甚至更好地将DOM层次结构中的第一个非动态元素。

所以它会是$([your-first-non-dynamic-element]).on(....)

我会花一些时间在http://api.jquery.com/on/

上阅读有关on()事件的更多信息

jQuery：hide（）和show（）的问题

2 个答案: