Как изменить содержимое элемента jQuery - PullRequest
Новая
       14

Как изменить содержимое элемента jQuery

0 голосов
/ 05 марта 2019

Следующий скрипт работает нормально.Только теперь я хочу добавить больше кнопок и больше класса ul. Скрипт работает только с одной кнопкой и одним классом ul.

Я пробовал такмного вещей, но сейчас мне нужна помощь.Пожалуйста, смотрите картинку ниже:

image

Сценарий (демонстрационный сайт) 

<body>
        <header>
            Testing
        </header>

            <input type="button" value="Open 1" id="openOne" />
            <input type="button" value="Open 2" id="openTwo" />

    <ul class="imageDataOne clearfix">
        <li><a href="images/img-part-1-1.jpg" data-background-color="#000000"></a></li>
        <li><a href="images/img-part-1-2.jpg" data-background-color="#000000"></a></li>
    </ul>

    <ul class="imageDataTwo clearfix">
        <li><a href="images/img-part-2-1.jpg" data-background-color="#000000"></a></li>
        <li><a href="images/img-part-2-2.jpg" data-background-color="#000000"></a></li>
    </ul>

    <script type="text/javascript">
        $(document).ready(function() {

            //      v         Here is the problem                                 
            $('.imageDataOne a').apImageFullscreen({
                imageZoom:{},
            });

            $('#openOne').click(function() {
                $('.imageDataOne a:first')
                    .apImageFullscreen('option', 'enableScreenfull', $('#use-fullscreen').is(':checked'))
                    .apImageFullscreen('open', 0);
            });

            $('#openTwo').click(function() {
                $('.imageDataTwo a:first')
                    .apImageFullscreen('option', 'enableScreenfull', $('#use-fullscreen').is(':checked'))
                    .apImageFullscreen('open', 0);
            });             


        });

    </script>
</body>

1 Ответ

0 голосов
/ 05 марта 2019

Вы можете установить содержимое элемента, используя JQuery's .html () : 

$('.imageData.clearfix').html(`<strong>This is the new element content</strong>`);

Чтобы добавить новые данные, используйте JQuery's .append () : 

$('.imageData.clearfix').append(`<li><a href="images/pride-w'14-8_large.jpg" data-background-color="#000000"></a></li>`)
...