jquery - 仅当子 Div 有类时如何编写 jQuery

Question

我有一个将在 php 中生成的菜单，其中可能包含两个不同的子 div。长话短说，php 将在“li”中添加一个类名为“showBubbles”的 div，和/或另一个类名为“hideLogo”的 div。如果存在“showBubbles” div，我需要执行一个函数，如果存在“hideLogo”，则需要执行另一个函数。如何在鼠标悬停时做到这一点？结构如下所示：

<ul>
<li>
    <a href="#"><img src="imagePlaceholder" /></a>
    <div class="showBubbles"></div>
    <div class="hideLogo"></div>
</li>
</ul>

Answer 1

未经测试，但这应该可以解决问题。

$('ul').on('mouseover', 'li', function(e)
{
    if($(this).children('div').hasClass('showBubbles'))
    {
        // Execute code for showBubbles div
    }
    else
    {
        // Execute code if 'showBubbles' is not present
    }
}

Answer 2

在悬停回调函数中，可以使用以下代码：

var showBubbles = $("li div.showBubbles").length;
if(showBubbles > 0){
   // first function here
}

var hideLogo = $("li div.hideLogo").length;
if(hideLogo > 0){
   // second function here
}

Answer 3

尝试这个

JS代码

$('li').hover(function(){
    if($(this).find('.showBubbles')){
       showBubbles();
    }
    if($(this).find('.hideLogo')){
       hideLogo();
    }
});

function showBubbles(){
  alert('showBubbles response');
}

function hideLogo(){
  alert('hideLogo response');
}

JS 小提琴代码

Answer 4

$('ul').on('mouseover', 'li', function() {

   $(this).find('div.showBubbles').length && showBubbles(); //calls showBubbles()

   $(this).find('div.hideLogo').length && hideLogo(); //calls hideLogo()

});

Answer 5

您可以通过尝试使用 jQuery 选择它来检查是否具有某个类的 div，然后检查length返回的 jQuery 对象的。例如，对于showBubbles：

var showBubblesExists = $('li .showBubbles').length > 0;

我相信这应该为您指出正确的解决方案。

Answer 6

尝试如下，

var sb = 0, hb = 0;
$('li').hover(function () {
   sb = $('.showBubbles', this).length;
   hb = $('.hideLogo', this).length;

   if (sb) {  /*function for sb*/ }
   if (hb) { /*function for hb*/ }

}, function () {

   if (sb) {
     //function for sb 
     sb = 0;
   }
   if (hb) { 
     //function for hb 
     hb = 0;
   }
});