Question

我现在已经花了好几个小时了，如何定位包含带有特定文本的p的div

HTML

<div class="NavBar_Row_Button2"><p>DONATE</p></div>
<div class="NavBar_Row_Button2"><p>CONTACT</p></div>
<img src="Design/Erk%20logo.png" alt="Erk Logo" id="NavBar_Logo">
<img src="Design/ycoGM9dcE.png" id="Drop_Menu">

Jquery的＆＃39;

$(document).ready(function(){
  $('.NavBar_Row_Button2 P').hover(function(){
    $(this).css('color', '#00ddcb'); 
    $(this.parentElement).css('background-color', '#00ddcb');    
  });

  $('.NavBar_Row_Button2 P').mouseleave(function(){
      $(this).css('color', 'white'); 
      $(this.parentElement).css('background-color', 'white');
  });

  $('.NavBar_Row_Button1 P').hover(function(){
      $(this).css('color', '#00ddcb'); 
      $(this.parentElement).css('background-color', '#00ddcb');
  });
  $('.NavBar_Row_Button1 P').mouseleave(function(){
      $(this).css('color', 'white'); 
      $(this.parentElement).css('background-color', 'white');
  });
  if ($(this).is('div:contains("HEY")')) {
      alert('right')  
  };
});

所以你可以看到我改变一些背景颜色，但是如果带有带有特定文字的p的特殊div是：hover，我也想要用图像我该如何定位这个特定对象，在这种情况下，这是带有

捐赠

的div，尝试包含其他东西但不适合我的东西

Answer 1

$('.NavBar_Row_Button2 P').hover(function(){
    if($(this).text() == 'Text you are looking for')
    {
      $(this).css('color', '#00ddcb'); 
      $(this.parentElement).css('background-color', '#00ddcb');
    }
});

Answer 2

您可以使用:contains()选择器：

$('.NavBar_Row_Button2 p:contains("DONATE")').hover(function(){
    $(this).css({'color': 'red'});
});

但是，我可能会建议您尝试使用其他一些识别方法，以便将文本内容与行为分开，例如添加类或其他属性来识别目标。

Answer 3

由于您似乎没有动态生成这些<p>元素的文字，为什么不给每个人一个唯一的ID并选择这种方式呢？类似的东西：

HTML：

<div class="NavBar_Row_Button2">
   <p id="donate">DONATE</p>
 </div>

JavaScript的：

$('#donate').hover(function() {
 //Whatever you want to do here
});

（Javascript / jQuery）使用带有特定文本的p定位div

3 个答案: