Загрузить внешний HTML в несколько div одного и того же класса

Я пытаюсь создать портфолио обложек для моей музыки.

В настоящее время страница моего портфолио загружает все содержимое моих альбомов при начальной загрузке страницы. Содержание содержится в скрытых элементах div.

При нажатии на альбом содержимое прокручивается вниз и закрывается при повторном нажатии, используя .slideToggle(), Смотрите сайт здесь

Меня беспокоит то, что я хочу, чтобы страница загружалась быстрее и содержала только контент при вызове.
Любая помощь будет принята с благодарностью.

Я разработал тестовый сценарий:

<!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>
Источник

2 ответа

Решение

Ну, я нашел решение. Это заняло немало хлопот, и ответ Маттитоммо поставил меня на правильный путь. Итак, еще раз спасибо Мэтти.

В итоге я написал одну функцию () и передал изменение имени переменной из html в функцию jQuery, используя событие onClick. Вот новый скрипт:

<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>

Я использовал.hasClass(), addClass() и.removeClass() в своем выражении if/else - как бы сказать: "Если в альбоме, на котором я щелкнул, уже есть класс.selected, то его содержимое должно быть открыто и видимый. Таким образом, удалите класс.selected и закройте div.albumContent, который следует за divAlbumThumb, по которому щелкнули. В противном случае, если в выбранном мной альбоме нет класса.selected, он не должен быть открыт. Поэтому добавьте класс, выбранный для альбома, на который я нажал, и откройте следующий альбом Content div."

Затем я упростил html, используя его для передачи внешнего содержимого альбома (html) в div.albumContent после выбранного div.albumThumb:

<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.

Источник

Этот сайт очень медленный! Это, вероятно, из-за дублирования кода и количества событий, которые вы назначаете. Мы можем сжать ваш код, а затем уменьшить количество событий, используя 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);
            });
        }
    });
});
Источник
Другие вопросы по тегам