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

就个人而言，我会检查.text()的{{1}}的值。您的选择器已关闭，因为您没有选择JS div，而是选择字符串'this'。

this

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

Answer 2

试试这个

$(".sample").on({
  mouseenter: function() {
    if ($(this).is(":contains('red')")) {
      $(this).css("background-color", "red")
  }
},
mouseleave: function() {
    if ($(this).is(":contains('red')")) {
      $(this).css("background-color", "yellow")
   }
  }
});

'这'不应该在引号中

Answer 3

使用is： -

$(".sample").on({
  mouseenter: function() {
    if ($(this).is(":contains('red')")) {
      $(this).css("background-color", "red")
    }
  },
  mouseleave: function() {
    if ($(this).is(":contains('red')")) {
      $(this).css("background-color", "yellow")
    }
  }
});

<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>

Answer 4

使用jQuery .text（）

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

mouseleave: function () {
 if($(this).text()=="red"){
    $(this).css("background-color","yellow")}
}
});`

Answer 5

而不是使用复杂的：

if($("this:contains('red')").length > 0)

尝试更简单：

if(this.innerHTML === 'red')

工作正常。您也可以使用：

if(this.textContent === 'red')

Answer 6

通过这种方式对它进行测试并且有效。

我不确定如何让包含在这种语句中工作 - 我感觉它与你正在检查元素而不是它的文本有关，请尝试使用它：

$(function(){
$(".sample").on({
  mouseenter: function () {
    if(this.innerHTML.indexOf("red") != -1){
       $(this).css("background-color","red")
     }
  },

  mouseleave: function () {
    if(this.innerHTML.indexOf("red") != -1){
      $(this).css("background-color","yellow")
    }
  }
});

在鼠标输入时检查元素的内容

6 个答案: