当我调整屏幕大小时，jQuery 不断在前面添加另一个按钮答案

【问题标题】：jQuery keeps prepending another button when I resize screen当我调整屏幕大小时，jQuery 不断在前面添加另一个按钮
【发布时间】：2014-04-19 10:04:47
【问题描述】：

我试图在屏幕小于 480 像素时隐藏段落，并在前面添加一个“阅读更多”按钮来打开隐藏的段落。

我尝试了以下代码，但是，在调整屏幕大小后，按钮现在适用于所有其他屏幕大小。关于我哪里出错的任何提示？

$(document).ready(function(){
        /*  Hide content and append a button to show more content
        ======================================================================== */
        $(window).resize(function() {
            if ($(window).width() <= 480) {
                $('#first_text_paragraphs').append('<button>Read More</button>');
            /* toggle Read more button
            ============================================= */
            $('button').on("click", function() {
                $('.about_text_paragraphs').slideToggle();
            });
            }
        });

    });

【问题讨论】：

您将.on("click" 放在resize 中，因此每次调整窗口大小时，每个按钮都会附加一个click 事件侦听器...
另外，您不应该将 JavaScript 用于此类内容。这就是 CSS 的用途。
感谢您的评论，我不明白为什么每次调整大小时都会添加另一个按钮。将来，我将使用 CSS，我认为我会尝试使用 jQuery 来改进，看看我是否可以做到。但这一切都大有帮助。

标签： javascript jquery css media-queries

【解决方案1】：

一般提示：

不要附加元素，只要让它一直存在，然后使用display CSS 属性根据需要切换它。
如果你在宽度低于 480 像素时做某事，你需要在宽度超过 480 像素时执行逆操作，否则你所做的将继续存在。
如果要在满足某些条件时向页面添加元素，则应使用标志（或类似机制）以确保不会多次添加元素。例如，如果用户将大小调整为 470 像素，然后再调整为 460 像素。您不想将按钮附加两次。
Media queries 是你的朋友。他们可以用更少的代码做你想做的事。不过，我假设您对这里的程序化方法感兴趣。

具体来说，我会大致这样编码：

$(document).ready(function(){
    $('#readMore').on("click", function() {
        $('.about_text_paragraphs').slideToggle();
    });

    if ($(window).width() <= 480) {
        $("#readMore").show();
    }

    /*  Hide content and append a button to show more content
        ======================================================================== */
    $(window).resize(function() {
        if ($(window).width() <= 480) {
            $("#readMore").show();
        }
        else {
            $("#readMore").hide();
        }
    });

});

这是一个小提琴：http://jsfiddle.net/FFuvG/

或者，您可以采用 bjb568 的 excellent 建议并简单地使用 CSS 媒体查询来完成同样的事情。

【讨论】：

感谢您解释我的错误，现在更有意义了。我想 CSS 是一个更好的选择。
如果我正在编写这段代码，我会在.resize 之后添加.trigger("resize")，这样我就不需要另一个if($(window).width() <= 480。 :D

【解决方案2】：

jQuery 滥用！使用 CSS：

@media screen and (max-width: 480px) {
    #mytext {
        max-height: 200px;
        overflow: hidden;
    }
    #mybutton {
        display: block;
    }
}

HTML：

<div id="mytext">lorem ipsum</div>
<button id="mybutton" hidden>Read More</button>

Fiddle

这应该比 jQuery 快得多（与所有 CSS 一样）。

【讨论】：

哈哈，太搞笑了。好的，我现在试试这个，让你知道。谢谢。
你说得对，CSS 是一个更好的选择。也简单多了。
不要简单地使用过多的jQuery！它解决了宇宙中的每一个问题！顺便说一句，你试过jQuery diet plugin吗？

【解决方案3】：

试试这个：

演示： http://jsfiddle.net/YEwUZ/514/

这是按钮出现的地方： http://jsfiddle.net/YEwUZ/515/

通过移动输出区域的宽度来查看演示是否是您想要完成的。

HTML

<div class="button">
    This is a Button
</div>
<div class="mydiv">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CSS

.button { 
    background:#fefefe;
    width:100px;
    text-align:center;
    margin:5px;
    padding:5px 15px; 
    border:1px solid #eee;
}

@media only screen and (max-width:480px) {
    .mydiv {display:none;}   
}
}

JQUERY

$(document).ready(function(){
        $('.button').click(function() {
           if ( $( ".mydiv" ).is( ":hidden" ) ) {
            $('.mydiv').fadeIn();

           } else {
            $('.mydiv').fadeOut();

         }
      });
 });

【讨论】：