1

我使用 jQuery 开发了一个函数，它隐藏和显示图像，让 a<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');
});
4

2 回答 2

1

您将需要使用该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()阅读更多关于该事件的信息

于 2013-04-15T15:33:02.380 回答
1

您希望将on触发器与动态变化的元素一起使用（在本例中是您的类）。

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

在此处阅读有关此内容的更多信息：http: //api.jquery.com/on/ 它为我节省了很多头痛！

于 2013-04-15T15:32:02.327 回答