Question

我正在尝试将数据属性与搜索词进行比较，如下所示：

var searchArea = $('#indexContainer');
var searchVal = $('#search').val();
var items = $('.processLink');

var links;

$('#search').keyup(function() {
  // on search input key up

  //for each .processLink
  $.each(items, function(index, value) {
    //get the selector
    var selected = $(value);

    //get the keywords
    var keywords = selected.data('keywords');

    //console.log(selected.attr('id'));

    $("#" + selected.attr('id') + ":contains('" + searchVal + "')").css("text-decoration", "underline");
  });

});

所以如果我有几个这样的div

<div id="div1" class="processLink" data-keywords="div one cat dog"></div>
<div id="div2" class="processLink" data-keywords="div blade cow horse"></div>
<div id="div3" class="processLink" data-keywords="div camera bag"></div>
<div id="div4" class="processLink" data-keywords="div"></div>

然后我只想检查密钥是否输入了搜索词搜索输入与data-keyword属性中的任何术语匹配，如果匹配则只显示具有相关单词的.processLink div并隐藏其余部分。我知道我现在试图强调它，这只是一个测试

希望这有点儿意义

Answer 1

上述代码存在许多问题。

输入值应在keyup
如果您已经定义了jQuery集合each，则不需要$('.processLink');。
:contains(检查div内的内容，而不检查其属性。您需要属性包含选择器 - [attribute *=..]。

<强> Fiddle

$(function(){
    var $divs = $('.processLink');
    $('#search').keyup(function() {
        var searchVal = this.value;
        $divs.css("text-decoration", "none");
        $divs.filter('[data-keywords*="'+searchVal+'"]').css("text-decoration", "underline");
    });
});

Answer 2

您可以更改

$("#" + selected.attr('id') + ":contains('"+searchVal+"')").css("text-decoration", "underline");

为：

if (typeof keywords === 'string' && keywords.indexOf(searchVal) !== -1) {
    selected.css("text-decoration", "underline");
}
else {
    selected.css("text-decoration", "none");
}

顺便说一下，您可能需要在每个键上添加一个新的searchVal值，您可能需要将var searchVal = $('#search').val();移到keyup回调中，或者使用{{1回调中的参数如event。

Answer 3

$（'。classname标记名[data-id ='+ vlaue +']'）。parent（）。addClass（“ addclassname”）;

jQuery - 将data-attr与搜索词进行比较

3 个答案: