5

我建立的循环有一点问题。这是我第一次尝试使用 jQuery 构建循环。这是一个简单的阅读更多/更少按钮。

我遇到的问题很奇怪。当页面第一次加载时它工作得很好，但在那之后的任何时候，它都会运行整个事情而不考虑对 ID 的更改。

HTML：

<div class="inner_container" id="tag_info"><?php?></div>
<a id="read_more">read more ></a>

jQuery：

$('a#read_more').click(function() {
    $('#tag_info').stop().animate({
        height: '100%'
        }, 500 );
    $(this).text('< read less');
    $(this).removeAttr('id');
    $(this).attr('id', 'read_less');
        $('a#read_less').click(function() {
            $('#tag_info').stop().animate({
                height: '50px'
                }, 500 );
            $(this).text('read more >');
            $(this).removeAttr('id');
            $(this).attr('id', 'read_more');
        });
});

CSS：[不需要锚样式]

#tag_info {
height: 50px;
overflow: hidden;
}

发生的事情（第一次之后的任何时间）是 div 将立即动画到第一次单击函数中设置的高度，然后跳回到第二次单击函数中设置的高度。

如果我将它们分成两个不同的点击功能，第二个不起作用。最令人困惑的是它工作一次，然后无法正常工作。有什么建议么？

4

5 回答 5

2

如果要动态更改 ID，请使用事件委托。 

$('body').on('click','#read_more',function() {
    $('#tag_info').stop().animate({
        height: '100%'
    }, 500 );
    $(this).text('< read less').attr('id', 'read_less');
});

$('body').on('click','#read_less',function() {
    $('#tag_info').stop().animate({
         height: '50px'
     }, 500 );
     $(this).text('read more >').attr('id', 'read_more');
});

通过委派您绑定到绑定发生时存在于 DOM 中的静态父元素。当事件从您的动态 ID 中冒出来时，它将处理这些事件。 直接和委托活动

于 2013-06-21T13:38:43.877 回答
2

我相信当您将事件绑定到元素时，该事件将绑定到该特定元素，无论您稍后是否更改 id。

将此重写为切换或使用on带有事件委托的jQuery：http: //api.jquery.com/on/

于 2013-06-21T13:39:02.673 回答
2

一个简单的切换功能应该这样做：

$('#read_more').on('click', function() {
    var state = $(this).text() == 'read more >';
    $('#tag_info').stop().animate({
        height: (state ? '100%' : '50px')}, 500 );
    $(this).text(state ?'< read less' : 'read more >');
});

作为旁注，以百分比和像素设置动画值有时会导致问题。

小提琴

于 2013-06-21T13:42:21.183 回答
1 
Change your script as follows:

$('a#read_more').live("click",function() {
    $('#tag_info').stop().animate({
        height: '100%'
        }, 500 );
    $(this).text('< read less');
    $(this).removeAttr('id');
    $(this).attr('id', 'read_less');
        $('a#read_less').live("click",function() {
            $('#tag_info').stop().animate({
                height: '50px'
                }, 500 );
            $(this).text('read more >');
            $(this).removeAttr('id');
            $(this).attr('id', 'read_more');
        });
});
于 2013-06-21T13:44:56.897 回答
0

您正在将单击处理程序中的另一个处理程序添加到同一元素，这会导致问题。

$('a#read_less').click(function () {
    $('#tag_info').stop().animate({
        height: '50px'
    }, 500);
    $(this).text('read more >');
    $(this).removeAttr('id');
    $(this).attr('id', 'read_more');
});

试试这个（http://jsfiddle.net/balintbako/nc5Dp/）：

$('#read_more').click(function () {
    if ($(this).hasClass("more")) {
        $('#tag_info').stop().animate({
            height: '100%'
        }, 500);
        $(this).text('< read less');
    } else {
        $('#tag_info').stop().animate({
            height: '50px'
        }, 500);
        $(this).text('read more >');
    }
    $(this).toggleClass("more");
});
于 2013-06-21T13:40:03.997 回答