检查 ul list on_change(checkbox) 中是否存在 HTML attr

Question

我想知道如何使用 jQuery查看复选框元素的 HTML 属性（如此处的 cat）是否在 <ul> 元素列表中。

// checkbox like so, cat is the string I want
<input type="checkbox" name="country_code" data-cat="city_inf">

// list of elements containing my categories (when one element of it is checked in HTML code)
<ul id="sortable" class="ul_drag_el">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Cat name 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Cat name 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>etc..</li>
</ul>

另一个问题是，如果我想计算一个类别中有多少元素被检查以显示/隐藏li 类别名称，我应该按名称列出每个检查的元素还是只做一个计数器（仍然在 jQuery 中）。

目前我只在 jQuery 中有这个，但我真的不知道如何开始。

    $("input[type='checkbox']").change(function(){
        let text_to_append = "<li className='ui-state-default'><span className='ui-icon ui-icon-arrowthick-2-n-'>"
        text_to_append += $(this).attr('name');
        text_to_append += "</span>"

        if(this.checked){
            $('.ul_drag_el').append(text_to_append)
        }  
    })

编辑：终于可以使用了

$("input[type='checkbox']").change(function(){
        let this_name = $(this).attr('data-cat')

        let text_to_append = "<li className='ui-state-default' data-cat='"
        text_to_append += this_name
        text_to_append += "'><span className='ui-icon ui-icon-arrowthick-2-n-'>"
        text_to_append += this_name
        text_to_append += "</span>"

        if(this.checked){
            $('.ul_drag_el').append(text_to_append)
        }else{
            $('#sortable li').each(function(){
                if($(this).attr('data-cat') == this_name){
                    $(this).remove();
                }
            })
        }
    })

Answer 1

您也可以简单地将 data-attribute 添加到您的 li 标签，其值为 data-cat 。然后，无论何时选中复选框，您都可以简单地检查 data-cat 是否已经存在或不使用 $("#ul").find("[data-name=" + $(this).data('cat') + "]").length == 0)如果是，请删除它们或添加新的li。

演示代码：

$("input[type='checkbox']").change(function() {
  //check if checkbox is checked & that doesn't exist inside ul
  if ((this.checked) && ($("#ul").find("li[data-name=" + $(this).data('cat') + "]").length == 0)) {
    let text_to_append = "<li className='ui-state-default' data-name='" + $(this).data('cat') + "'><span className='ui-icon ui-icon-arrowthick-2-n-'>"
    text_to_append += $(this).attr('name');
    text_to_append += "</span></li>"
    $('.ul_drag_el').append(text_to_append)
  } else {
    //remove them
    $("li[data-name=" + $(this).data('cat') + "]").remove()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="city_inf" data-cat="city_inf">
<input type="checkbox" name="abcs" data-cat="abcs">
<ul id="sortable" class="ul_drag_el">

</ul>

Answer 2

$(document).on('change', '.country_code', function () {
    var cat = "";
    if ($(this).is(':checked')) {
        cat = $(this).attr('data-cat');
    }
    $('#sortable li').each(function () {
        if ($(this).attr('data-cat') == cat) {
            $(this).show()
        } else {
            $(this).hide()
        }
    })
})