无法将 id 放在由 Jquery 插件生成的模式中的未排序列表中

Question

下面是由我包含的 Jquery 插件文件生成的模式中的 html：

<div class="photobooth">
    <div class="blind"></div>
    <canvas ></canvas>
    <div class="warning notSupported"></div>
    <div class="warning noWebcam"></div>
    <ul>
        <li title="hue" class="hue"></li>
        <li title="saturation" class="saturation"></li>
        <li title="brightness" class="brightness"></li>
        <li title="crop" class="crop"></li>
        <li title="take picture" class="trigger"></li>
    </ul>
</div>

我一直在使用下面的代码在运行时为我的标签添加一个 id :

var ul = document.querySelector('.photobooth > ul');
ul.id = 'someId';

但是它抛出一个错误说：

 Uncaught TypeError: Cannot set property 'id' of null     myid.js?      njl6m7:190 (anonymous function)

我该怎么做才能在我的标签中添加一个 ID？我怀疑在执行我的脚本代码时，模态 html 尚未加载。谁能帮我解决这个问题？

Answer 1

我不太确定所有的细节，但我所做的是复制你的代码并在其中包含一个脚本标签 JavaScript。所以 HTML 看起来像这样：

<html>
    <head>
        <script src="main.js"></script>
    </head>
    <body>
        <div class="photobooth">
            <div class="blind"></div>
            <canvas ></canvas>
            <div class="warning notSupported"></div>
            <div class="warning noWebcam"></div>
            <ul>
                <li title="hue" class="hue"></li>
                <li title="saturation" class="saturation"></li>
                <li title="brightness" class="brightness"></li>
                <li title="crop" class="crop"></li>
                <li title="take picture" class="trigger"></li>
            </ul>
        </div>
    </body>
</html>

和 JavaScript 文件 (main.js) 如下所示：

var ul = document.querySelector('.photobooth > ul');
ul.id = 'someId';

为了解决您的问题，我将 <script> 标签移到了 <body> 标签的底部。这将运行 main.js 在正文加载后，像这样：

<html>
    <head>
    </head>
    <body>
        <div class="photobooth">
            <div class="blind"></div>
            <canvas ></canvas>
            <div class="warning notSupported"></div>
            <div class="warning noWebcam"></div>
            <ul>
                <li title="hue" class="hue"></li>
                <li title="saturation" class="saturation"></li>
                <li title="brightness" class="brightness"></li>
                <li title="crop" class="crop"></li>
                <li title="take picture" class="trigger"></li>
            </ul>
        </div>

        <script src='main.js'></script>
    </body>
</html>

根据我的理解，jQuery 相当于将脚本标记放在主体的末尾，是使用 $(document).ready(callback) 或 $(window).load(callback)，它们做不同的事情。

不同之处在于：$(document).ready 等待 DOM 加载但不等待任何图形（图像等），而 $(window).load(callback) 等待一切完成。所以如果你想使用其中任何一个，你的 main.js 文件将变成：

$(document).ready(function() {
    var ul = document.querySelector('.photobooth > ul');
    ul.id = 'someId';
});

并且您的脚本标签将位于 <head> 标签中。希望这能成功！

Answer 2

我刚刚知道你用的是哪个插件...

并且由于您使用的是 jQuery，您可以：

$('#example').photobooth();
$('.photobooth > ul').attr('id', 'someId');

这会将那个 ID 应用于加载时生成的 photobooth 小部件中的第一个 ul。（其中“#example”是您的 photobooth 小部件的容器 ID）

jsfiddle demo

无法将 id 放在由 Jquery 插件生成的模式中的未排序列表中

Cannot put an id on an unsorted list in a Modal Generated By a Jquery Plug-in

html

javascript

jquery

modal-dialog