jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery循环工作一次大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个循环,我已经建立了一个小问题.这是我第一次尝试使用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将立即动画到第一次单击功能中设置的高度,然后跳回到第二次单击功能中设置的高度.

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

解决方法

如果要动态更改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中冒出的事件. Direct and Delegated Events

大佬总结

以上是大佬教程为你收集整理的jQuery循环工作一次全部内容,希望文章能够帮你解决jQuery循环工作一次所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。