Javascript 如何更改jQuery元素内容_Javascript_Jquery_Element_Var

Javascript 如何更改jQuery元素内容

javascript jquery

Javascript 如何更改jQuery元素内容,javascript,jquery,element,var,Javascript,Jquery,Element,Var,下面的脚本工作正常。只是，现在我想添加更多按钮和ul类。脚本只使用一个按钮和一个ul类我尝试过很多事情，但现在我需要帮助。请看下图：测试 $（文档）.ready（函数（）{ //问题就在这里 $（'.imageDataOne a'）.apImageFullscreen({ 图像缩放：{}， }); $（'#openOne'）。单击（函数（）{ $（'.imageDataOne a:第一个'） .apImageFullscreen（'option'，'enableScre

下面的脚本工作正常。只是，现在我想添加更多按钮和ul类。脚本只使用一个按钮和一个ul类

我尝试过很多事情，但现在我需要帮助。请看下图：


测试








$（文档）.ready（函数（）{
//问题就在这里
$（'.imageDataOne a'）.apImageFullscreen({
图像缩放：{}，
});
$（'#openOne'）。单击（函数（）{
$（'.imageDataOne a:第一个'）
.apImageFullscreen（'option'，'enableScreenfull'，$（'use fullscreen'）。是（':checked'））
.apImageFullscreen（'open'，0）；
});
$（'#openTwo'）。单击（函数（）{
$（'.imageDataTwo a:first'）
.apImageFullscreen（'option'，'enableScreenfull'，$（'use fullscreen'）。是（':checked'））
.apImageFullscreen（'open'，0）；
});             
});

您可以使用JQuery设置元素的内容：

$（'.imageData.clearfix'）.html（`这是新元素内容`）；

要附加新数据，请使用JQuery的：

$（'.imageData.clearfix'）.append（``）

请详细说明您正在尝试执行的操作。也可以把截图中完整的代码示例放在这里，或者放在JSFIDLE上，这样我们就可以理解和解决Sinisa Bobic，谢谢你的建议。我正在尽我所能解释人们如何提供帮助。请阅读“”指南。由于您的问题不清楚，在代码的图像中发布额外的或澄清的问题是没有帮助的。今后请记住，我们需要您的代表（“”）代码来回答您的问题，而不是作为外部资源。对于由此带来的不便，非常抱歉，学习java以及如何提出一个好问题。谢谢你的链接！米罗斯拉夫，谢谢你的帮助！！我添加了一个额外的类和按钮。第二个按钮现在不起作用。//v这里是问题$（'.imageDataOne a'）.apImageFullscreen（{imageZoom:{}，}）；现在必须打开rigth。所以它适用于按钮一。但现在它必须在同一个目的地打开第二个窗口。这里是我寻找解决方案的地方。它的哪一部分不起作用，我需要一些更多的信息，您尝试了什么？$（'.imageDataTwo a'）.apImageFullscreen（{imageZoom:{}，这是我在第二个按钮打开时添加到脚本中的内容，这不起作用。好的，当您单击（？）这是

.imageDataTwo

你希望发生什么？我试图了解最终结果是什么。是的，我理解，很好。我确实尝试过：它打开屏幕，但有冲突。图片没有排序，内部按钮也不起作用。

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

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

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