Question

根据数据属性搜索元素。我有以下代码，并且想知道，如果数据属性值带空格

，如何实现这一目标？

<div class="data" data-value="auto"> abcd </div>
<div class="data" data-value="simple tab,block"> acd </div>
<div class="data" data-value="auto"> abd </div>
<div class="data" data-value="block"> abcde </div>
<div class="null-data"> type the correct value </div>

<input class="search-text" name="keyword" type="text" id="search-keyword" placeholder="search">

在键入输入值事件时，我基本上想找出属于特定数据值的所有项目？

$('#search-keyword').on( "keyup", function() {
$('.null-data').hide();
    if($(this).val()) {
        var input = $(this).val().toLowerCase();
        $(".data").hide();
        $(".data[data-value*="+ input +"]").show();
        if(!$('.data:visible').get(0)){
            $('.null-data').show();
        }
    }else{
        $('.null-data').show();     
    }
});

我根据数据属性值获取html元素，但如果数据属性值有空格，则html元素不会显示。

Answer 1

在构建选择器时，需要将输入值包装在quote中的内容元字符中：

$(".data[data-value*='"+ input +"']").show();
//-------------------^-----------^
    if(!$('.data:visible').get(0)){
        $('.null-data').show();
    }

<强> Workin Demo

Answer 2

您使用的语法不正确。

将您的代码替换为此

$('#search-keyword').on( "keyup", function() {
$('.null-data').hide();
    if($(this).val()) {
        var input = $(this).val().toLowerCase();
        $(".data").hide();
        $(".data[data-value*="+ input +"]").show();
        if(!$('.data:visible').get(0)){
            $('.null-data').show();
        }
    }else{
        $('.null-data').show();     
    }
});

使用数据属性值搜索div

2 个答案: