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

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

本文关键字：模式 排序 列表 id 放在 插件 Jquery      更新时间：2023-11-02

下面是我包含的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。有人能帮我吗？

我不太确定所有的细节，但我所做的是复制了您的代码，并包含了一个带有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相当于将script标记放在正文的末尾，它使用$(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';
});

并且您的脚本标记将在CCD_ 10标记中。希望能成功！

我刚刚弄清楚你使用的是哪个插件。。。

由于您使用的是jQuery，因此可以执行以下操作：

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

这将把该ID应用于加载时生成的photobooth小部件中的第一个ul。（其中"#example"是您的摄影棚小部件的容器ID）

jsfiddle演示

相关文章：