Question

我正在更改表单上单选按钮的默认外观。为了做到这一点，我在jQuery输入标签之后添加了一个span标签。这对于在页面加载时呈现的单选按钮很好用。但是，表单使用条件语句来隐藏两个问题，因为在有条件显示它们之前它们不存在，所以两个问题不会在输入后添加跨度。表单具有一个js挂钩，当我有条件地添加新字段时，该挂钩会触发。 我的问题是，如果用户有条件地揭示了这两个问题，那么当我只需要一次添加一次时，该span元素就会被多次添加。

在创建新的跨度标签后，我尝试检查要删除的跨度标签，但是我没有使其正常工作。我尝试将新创建的单选按钮保存在节点列表中并循环浏览，但是最终添加的跨度标签与节点列表的长度一样多。

 <div class="radio"> <label> <input type="radio"> </label> </div> // Adds the span to the hidden elements as they are revealed $(document).on('cf.add', function() { if ($('.caldera-forms-conditional-field .radio input[type=radio] .radiomark').length == 0) { $(".caldera-forms-conditional-field .radio input[type=radio]").after("<span class='radiomark'></span>"); } });

它将根据需要添加范围，但是问题是，当该js钩再次触发时，它将向每个单选按钮添加其他范围标签。如果用户更改了触发挂钩的单选按钮的答案，则会添加更多的跨度标签。有没有办法检查多个span标签并删除重复的标签？

Answer 1

您正在使用后代（选择器之间的空格）选择器。它查找属于或低于子元素的任何元素。而是将跨度放在同一父级中的输入之后。您想要的是相邻的兄弟选择器（+），以防止在跨度已存在的情况下添加其他跨度。兄弟选择器查找与输入元素具有相同父元素并在输入元素之后的元素

例如

<div class="radio"><!-- this is an element -->
    <label><!-- this is both a child and descendant of the div.radio element -->
        <input type="radio"><!-- this is a descendant of the div.radio element -->
    </label>
</div>

但是，

<div class="radio">
    <label>
        <input type="radio"> <!-- This is the element you are looking for -->
    </label>
</div>

脚本一次调用后，

<div class="radio">
    <label>
        <input type="radio">
        <span class="radiomark"></span><!-- This element gets added, it is a sibling of the input element -->
    </label>
</div>

因此，使用+查找兄弟姐妹：

$(document).on('cf.add', function() {

    if ($('.caldera-forms-conditional-field .radio input[type=radio] + .radiomark').length == 0) {
        $(".caldera-forms-conditional-field .radio input[type=radio]").after("<span class='radiomark'></span>");
    }

});

Answer 2

无需使用条件检查长度。您可以使用has()和not()组合仅过滤没有radiomark的标签，并使用append()

$('div.radio label').not(':has(.radiomark)').append('<span class="radiomark"></span>')

.radiomark:after { content: 'Radio Mark'; color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio">
  <label>
        <input type="radio">
    </label>
</div>

检查DOM中是否存在元素，如果不存在，则在每次单选输入后将其添加

2 个答案: