javascript - 检查鼠标输入的元素内容

Question

我正在尝试设置一个鼠标输入事件，该事件在元素包含特定文本时触发，但由于某种原因它无法识别 :contains 参数。

html:

<div class="sample">red</div>
<div class="sample">text</div>

JavaScript:

$(".sample").on({
    mouseenter: function () {
    if($("this:contains('red')").length > 0)
   { $(this).css("background-color","red")}
    },

    mouseleave: function () {
     if($("this:contains('red')").length > 0){
        $(this).css("background-color","yellow")}
    }
});

This is the JSFiddle

如有任何帮助，我们将不胜感激!

Answer 1

就我个人而言，我会检查 div 的 .text() 的值。您的选择器已关闭，因为您选择的不是 JS this，而是字符串“this”。

$(".sample").on({
    mouseenter: function () {
    if($(this).text() =='Red') { 
      $(this).css("background-color","red")}
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sample">Red</div>
<div class="sample">Text</div>