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

Posted 2023-05-08

【中文标题】检查 ul list on_change(checkbox) 中是不是存在 HTML attr

【英文标题】：Check if HTML attr is present in ul list on_change(checkbox)检查 ul list on_change(checkbox) 中是否存在 HTML attr

【发布时间】：2021-07-26 15:44:25

【问题描述】：

我想知道如何使用 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();
                
            )
        
    )

【问题讨论】：

对于自定义属性，您应该使用data-，例如data-cat

这是一个网络条款？我是说好习惯？

是的：developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…

您要检查data-cat 属性是否包含在ul 的猫名中吗？

我想查看ul 列表中的li 在更改我的复选框的值时是否具有data-cat 属性。像这样，如果我正在检查它，我会将<li> 附加到<ul> 列表中。如果我取消选中它，我需要删除与data-cat的复选框对应的<li>。

【参考方案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>

【讨论】：

是$("#ul").find("[data-name=" + $(this).data('cat') + "]"在整个ul元素中搜索吗？

我猜还有其他的，比如 ul > li > span ?

你可以更具体的添加find("li[data-name=" + $(this).data('cat') + "]" ..

感谢斯瓦蒂，查找功能对我有很大帮助。不知道它存在。

您可以了解更多关于此here 的信息。另外，请通过Tree Traversal。

【参考方案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()
        
    )
)

【讨论】：

通过全选将其作为代码演示文稿，然后单击 以获得漂亮的视图。并且不要忘记将类名命名为'.country_code'。

我只是看到你的代码与所问的问题是否相关

好吧，目前我认为追加/删除 li 以列出但如果它与 .hide() 和 .show() 一起使用，那可能是一个解决方案。但这实际上是行不通的。