如何更改 jQuery 元素内容答案

【问题标题】：How to change jQuery element content如何更改 jQuery 元素内容
【发布时间】：2019-07-26 08:44:11
【问题描述】：

以下脚本运行良好。只是，现在我想添加更多按钮 和更多 ul 类。该脚本仅适用于一个按钮和一个 ul 类。

我已经尝试了很多东西，但现在我需要帮助。请看下图：

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

【问题讨论】：

请详细解释您要做什么。也把截图中的完整代码示例放在这里，或者放在jsfiddle上方便我们理解和解决
Sinisa Bobic，感谢您的建议。我正在尽我所能解释人们如何提供帮助。
请阅读“How to Ask”指南。由于您的问题不清楚，因此在您的代码图像中发布其他或澄清问题是没有帮助的。以后请记住，我们需要您的代表 ("minimal reproducible example") 在您的问题中编码，而不是作为外部资源。
很抱歉给您带来不便，学习java以及如何提出一个好问题。感谢您的链接！

标签： javascript jquery element var

【解决方案1】：

你可以使用JQuery的.html()来设置元素的内容：

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

要追加新数据，请使用 JQuery 的.append()：

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

【讨论】：

米罗斯拉夫，谢谢你的帮助！！我添加了一个额外的类和按钮。第二个按钮现在不起作用。 // v 这里是问题 $('.imageDataOne a').apImageFullscreen({ imageZoom:{}, });这必须立即打开。所以它适用于按钮一。但现在它必须在同一个目标中打开第二个窗口。这是我正在寻找解决方案的地方。
哪部分不起作用，我需要更多信息，您尝试过什么？
$('.imageDataTwo a').apImageFullscreen({ imageZoom:{}，这是我在第二个按钮打开的脚本中添加的，这不起作用。
好的，那么当您单击（？）此.imageDataTwo 时，您希望发生什么？我试图了解这里的最终结果。
是的，我明白了，太好了。我确实尝试过：它会打开屏幕但有冲突。图片未排序，内部按钮不起作用。