Javascript DOM如何隐藏不合适的复选框

Posted 2023-05-09

【中文标题】Javascript DOM如何隐藏不合适的复选框

【英文标题】：Javascript DOM how to hide out of place checkbox

【发布时间】：2021-02-27 15:18:52

【问题描述】：

我有一个在其中动态创建新标签的 Div。这些标签由一个具有唯一 ID 的跨度、用户输入的一些文本以及最重要的是标签内的一个复选框组成。该复选框供用户选择或取消选择创建的跨度。所有这一切都有效，但由于某种原因，复选框从我理解的范围中弹出（因为跨度是可检查的）并在跨度上方出现一条线，这会在我的标签之间产生间隙，如下所示：

当我尝试点击它时，没有任何反应。最奇怪的是 span 复选框有效。 当我检查代码时，我看到了这个，所以我知道复选框实际上不在范围内：

我用来执行此操作的代码：

让 wrapLabel = document.createElement("label") 让 inCheckBox = document.createElement("input")

    let x = document.createElement("span")
    let t = document.createTextNode(submission)

    let unique_id = uuidv4()

    inCheckBox.type = "checkbox"
    inCheckBox.name = unique_id 

    x.className = "item item-layer"
    x.id = unique_id 

    x.appendChild(t)
    wrapLabel.appendChild(inCheckBox) // replace this by x.appendChild(inCheckBox)
    wrapLabel.appendChild(x)
    wrapLabel.className = "wrapLabel"

    document.querySelector('.LayerList').appendChild(wrapLabel); 

问题是，当我尝试执行x.appendChild(inCheckBox) 之类的操作时，跨度不再可检查....理想情况下，我只是想使用我当前的代码并尽可能隐藏跨度上方复选框的间隙

【问题讨论】：

是的，我理解，但它只将“检查”功能应用于跨度，因此我认为它不应该是现在的位置

尽管如此，它可能只是它应该在的地方，尽管它使检查功能得以跨越。我的问题是，如果有可能删除复选框创建的额外空间但仍使用它来检查/取消选中跨度

【参考方案1】：

我测试了同样的东西只是为了更好地理解。我建议您仅创建跨度标签并根据您的需要添加/删除选择的类。我的意思是，如果您单击一个跨度，它将像这样添加 selected 类：<span class="item item-layer selected">layer 1</span> 如果您不想要该类，只需再次单击跨度。 您可以使用 javascript 完成工作：

document.querySelectorAll('.item-layer').forEach(item => 
    item.addEventListener('click', () => 
            if(item.classList.contains('selected'))
                item.classList.remove('selected');
            else
                item.classList.add('selected');
        );
    );

css 会是这样的：

.selected 
   border-color: green;

当它没有被选中时，你会放红色。 然后，您可以查询SelectorAll 选择了该类的每个跨度并执行您需要的任何操作。

【讨论】：

这听起来是个不错的选择！感谢您的建议，如果我无法隐藏复选框，我一定会试试这个

不客气。我建议这样做是因为我尝试了很多但没有结果。但我没有说什么，而是决定以这种方式提供帮助。如果你发现了什么告诉我，我很乐意再次阅读并帮助你