如何使用javascript或jquery验证自定义属性中是否存在某个值？

Question

假设我们有一个名为data-content的自定义属性。现在让我们寻找html标记：

 <h1 data-content="one two three four">Hello</h1>

我想要一个可以执行以下操作的Javascript / jQuery函数：

 verify.contains("h1", "two"); // => true
 verify.contains("h1", "five"); // => false

要么

 $("h1").verifyContains("two"); // => true
 $("h1").verifyContains("five"); // => false

那么，该怎么做呢？

Answer 1

使用属性包含单词选择器

var verify = {
  contains: function(selector, content) {
    return Boolean($(selector + '[data-content~=' + content + ']').length)
  }
}

console.log(verify.contains("h1", "two"))
console.log(verify.contains("h1", "five"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 data-content="one two three four">Hello</h1>

jQuery插件功能

$.fn.verifyContains = function(content) {
  return $(this).is('[data-content~=' + content + ']')
}

console.log($("h1").verifyContains("two"))
console.log($("h1").verifyContains("five"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 data-content="one two three four">Hello</h1>