0

我有以下隐藏的div：

<div class="showDescription 73" style="display:none;">blah blah blah</div>

然后在它的旁边：

<div class="more" divtoshow="73" style="cursor:pointer">more...</div>

我想单击带有类的 divmore并显示隐藏的 div，然后更改 word more... to less...，删除 class more，向其中添加一个类canHide，因此再次单击时它将再次隐藏 div。简单的东西。它变成了这样：

<div class="canHide" divtoshow="73" style="cursor:pointer">less...</div>

当我单击“更多”这个词时，隐藏的 div 显示并添加了一个类canHide，但是当再次单击它时没有任何反应，我不知道为什么。

JQuery - 本节按应有的方式工作：

$('.more').click(function() { // show hidden div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeIn();
    $(this).removeClass('more');
    $(this).addClass('canHide');
    $(this).html('less...');
});

这部分什么都不做？？

$('.canHide').click(function() { // hide shown div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeOut();
    alert('hey'); // for test purposes only
    $(this).removeClass('canHide');
    $(this).addClass('more');
    $(this).html('more...');
});

这里是一个小提琴

4

2 回答 2

8

您正在更改类，因此处理程序（在运行时绑定）不知道该新类存在。使用事件委托：

$(document).on('click', '.canHide', function() { // hide shown div

});

document应该是包含具有类的元素.canHide并且在运行时存在的元素，但是由于我看不到您的 HTML，document因此是一个安全的选择。

于 2013-11-05T14:03:41.080 回答
2

这可能更容易

$('.more').click(function() { 
    // show/hide element before .more && toggle text
    $(this).html($(this).html()=='▼'?'▲':'▼').prev('.showDescription').stop().fadeToggle();
});

它还删除了more链接 和之间的相应属性content，因为它使它们变得不必要。即 divtoshow/class 73

做了一个小提琴：http: //jsfiddle.net/filever10/zXz3c/

更新：这是分解的每一块

$('.more').click(function() {
    // get element
    $(this)
    //if html = ▼ then it should now be ▲, or if html = ▲ then it should now be ▼; else it should be ▼
    .html($(this).html()=='▼'?'▲':'▼')
    //get previous element by class
    .prev('.showDescription')
    //clear its queue to prevent buildup
    .stop()
    //fadeIn if it's hidden or fadeOut if it's visible
    .fadeToggle();
});
于 2013-11-05T14:24:18.280 回答