jquery 将外部html加载到同一个类的多个div中

woobm2wo 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(116)

我正在尝试为我的音乐创建一个CD封面组合。
目前，我的作品集页面在初始页面加载时加载了我相册中的所有内容。内容包含在隐藏的div中。
当你点击一个相册时，内容会向下滚动，并在再次点击时关闭，使用.slideToggle()。参见网站here
我关心的是，我希望页面加载速度更快，只有内容时，呼吁。
任何帮助将不胜感激。
我设计了一个测试场景：

<!doctype html>
<html>
    <title>jQuery external load test</title>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <style type="text/css">
            #container {
                width: 80%;
                margin: 0 auto;
                margin-top:;
            }
            .albumThumb {
                float: left;
                position: relative;
                margin: 5px;
                height: 150px;
                width: 150px;
                background-color: purple;
            }
            .albumThumb:hover {
                opacity: 0.8;
                filter:alpha(opacity=80);
            }
            .albumContent {
                display: none;
                width: 100%;
                float: left;
                position: relative;
                padding: 20px;
                color: #333;
                background-color: #eee;
                border: 1px solid #ddd;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <!-- Album #1 -->
            <div class="albumThumb"></div>
            <div class="albumContent"></div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.albumThumb').click(function() {
                        // Name content variable
                        var album = 'album-page';
                        var url = 'http://mysite.com/' + album + ' #project-info';
                        var content = $(this).nextAll('.albumContent:first');

                        // Load/Unload div content
                        if (content.is(':visible')) {
                            content.slideUp(500);
                            content.html('');
                        } else {
                            content.text('Loading...', function() {
                                content.load(url).content.slideDown(500);
                            });
                        }
                    });
                });
            </script>
            <!-- Album #2 -->
            <div class="albumThumb"></div>
            <div class="albumContent"></div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.albumThumb').click(function() {
                        // Name content variable
                        var album = 'album-page';
                        var url = 'http://mysite.com/' + album + ' #project-info';
                        var content = $(this).nextAll('.albumContent:first');

                        // Load/Unload div content
                        if (content.is(':visible')) {
                            content.slideUp(500);
                            content.html('');
                        } else {
                            content.text('Loading...', function() {
                                content.load(url).content.slideDown(500);
                            });
                        }
                    });
                });
            </script>
        </div>
        <!-- End Container -->
    </body>

</html>

jquery

来源：https://stackoverflow.com/questions/15691749/load-external-html-into-multiple-divs-of-same-class

2条答案

按热度按时间

x6492ojm1#

这个网站真的很慢！这可能是因为代码重复和您分配的事件数量。我们可以压缩代码，然后使用on委托减少事件的数量。
在使用它之前，你需要更新你的jQuery（你目前使用的是1.3，你需要至少 * 1.7（这是on被添加的时候））。
试试这个：

$(function() {
    $('.albumThumb').on("click", function() {
        // Name content variable
        var album = 'album-page';
        var url = 'http://mysite.com/' + album + ' #project-info';
        var content = $(this).nextAll('.albumContent:first');

        // Load/Unload div content
        if (content.is(':visible')) {
            content.slideUp(500);
            content.html('');
        } else {
            content.text('Loading...', function() {
                content.load(url).content.slideDown(500);
            });
        }
    });
});

赞(0）回复(0）举报 2023-06-22

8i9zcol22#

我找到解决办法了这确实花了不少时间，mattytommo的回答让我走上了正确的道路。再次感谢马蒂。
我最终编写了一个函数（），并使用onClick事件将变量名称更改从html传递到jQuery函数，这是新脚本：

<script type="text/javascript">
$(function albumSlider() {
    $('.albumThumb').on("click", function() {
        // Name content variables
        // var album = *Gets content from html "onClick"
        var url = 'http://mysite.com/' + album;
        var thisAlbum = $(this);
        var content = thisAlbum.nextAll('.albumContent:first');

        // Load/Unload div content
        if (thisAlbum.hasClass('.selected')) {
            thisAlbum.removeClass('.selected');
            content.slideUp(500, function() {
                content.html('');
            });
        } else {
            thisAlbum.addClass('.selected');
            content.slideDown(500, function() {
                content.text('Loading...').load(url);
            });
        }
    });
});
</script>

我在if/else语句中使用了.hasClass（）、addClass（）和.removeClass（），就好像在说：“如果我点击的相册已经选择了class .，那么它的内容必须是打开的并且可见的。因此，删除.selected类并关闭所单击的divAlbumThumb后面的div.albumContent。否则，如果我单击的相册没有.selected类，则它一定无法打开。因此，将class .selected添加到我单击的相册中，并打开下面的albumContent div。”
接下来，我简化了html，使用它将外部相册内容（html）传递给所选的div.albumThumb后面的div.albumContent：

<body>

<div id="container">

<!-- Album 1 -->

  <div class="albumThumb" onClick="javascript:album = 'album-1';"></div>

  <div class="albumContent"></div>

<!-- Album 2 -->

  <div class="albumThumb" onClick="javascript:album = 'album-2';"></div>

  <div class="albumContent"></div>


</div><!-- End Container -->

</body>

album-1和album-2现在在“var album ='';”的JavaScript函数中。

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 将外部html加载到同一个类的多个div中

2条答案

相关问题

热门标签

最新问答