处理jQuery悬停行为 [英] handle jQuery hover behavior

问题描述

我用我的问题做了一个简单的例子，所以我想你理解起来更容易。
我有几个 div s，它们都有灰色，但是当你将其悬停在其中一个上面时，你会看到它们获得了它们的真实颜色。
如果点击其中一个（并且点击警告），它应该改变颜色，并且 .hover（）不应该在这个元素上工作，直到另一个被点击。
我坐在这里一个小时，但没有得到它的工作：

  .test {background-color ：#ccc;} 
< div class =testid =d1>< / div> 
< div class =testid =d2>< / div> 
< div class =testid =d3>< / div> 
  

和脚本：

  $（function（）{
 $（'＃d1'）。hover（function（）{$（this）.css（'background-color'，'＃F00'）; }，function（）{$（this）.css（'background-color'，'#CCC'）;}）; 
 $（'＃d2'）。hover（function（）{$（this） .css（'background-color'，'＃F0F'）;}，function（）{$（this）.css（'background-color'，'#CCC'）;}）; 
 $（' （）{$（this）.css（'background-color'，'＃00F'）;}，function（）{$（this）.css（'background-color'，'点击（函数（）{$（this）.css（'background-color'，'＃F00'）; alert（）;}}; 
 $ b $（'＃d1'）。 （clicked）}）; 
 $（'＃d2'）。click（function（）{$（this）.css（'background-color'，'＃F0F'）; alert（clicked ）}）; 
 $（'＃d3'）。click（function（）{$（this）.css（'background-color'，'＃00F'）; alert（clicked）}）; 
  

}）

这里

看起来悬停仍然有效，并立即删除背景颜色。

没有太多改变你的代码 [重构]：

  $（function（）{
 var clickedId =''; 
 $ b $（'＃d1'）。hover（function（）{
 $（this）.css（'background-color'，'＃F00'）; 
} ，（）{
 if b}）; 
 $（'＃d2'）。hover（function（）{
 $（this）.css（'background-color'，'＃F0F'）; 
}，function（） {
 if（this.id！= clickedId）{
 $（this）.css（'background-color'，'#CCC'）; 
} 
}）; 
 $（'＃d3'）。hover（function（）{
 $（this）.css（'background-color'，'＃00F'）; 
}，function（） {
 if（this.id！= clickedId）{
 $（this）.css（'background-color'，'#CCC'）; 
} 
}）; 
 $ b $（'＃d1'）。click（function（）{
 clickedId = this.id; 
 $（'。test'）。not（this）.css （'background-color'，'＃CCC'）; 
 alert（clicked）; 
}）; 
 $（'＃d2'）。click（function（）{
 clickedId = this.id; 
 $（'。test'）。not（this）.css（'background-颜色'，'＃CCC'）; 
 alert（clicked）; 
}）; 
 $（'＃d3'）。click（function（）{
 clickedId = this.id; 
 $（'。test'）。not（this）.css（'background-颜色'，'＃CCC'）; 
 alert（clicked）; 
}）; 
 $ b $）
  

更改：

• 使用变量保存最后点击的元素的ID


• 单击元素时，存储该单元元素的ID。另外，将所有元素（除了您点击的元素）都恢复为原始背景颜色。


• 悬停时，检查丢失悬停的元素是否为最后点击的元素的ID（if它是，不要改变它的背景）

另外，我可能会使用CSS类并设置 .active 添加到单击的元素，并使用 .test：hover 。但我认为这是一个基本的JavaScript示例用于学习目的。

如果您想用CSS查看它： http://jsfiddle.net/MgTr4/1/

I've made a simple example with my problem so I guess it's easier for you to understand. I have a few divs which all have a grey color, but when you hover over one of them, you see they get their true color. If I click one of them (and it alerts clicked) it should change the color and the .hover() shouldn't work anymore on this element, until another one is clicked. I'm sitting here one hour and don't get it to work:

.test { background-color: #ccc;}
<div class="test" id="d1"></div>
<div class="test" id="d2"></div>
<div class="test" id="d3"></div>

and the script:

$(function() {
$('#d1').hover(function() { $(this).css('background-color', '#F00'); }, function() { $(this).css('background-color', '#CCC'); });
$('#d2').hover(function() { $(this).css('background-color', '#F0F'); }, function() { $(this).css('background-color', '#CCC'); });
$('#d3').hover(function() { $(this).css('background-color', '#00F'); }, function() { $(this).css('background-color', '#CCC'); });

$('#d1').click(function() { $(this).css('background-color','#F00'); alert("clicked")});
$('#d2').click(function() { $(this).css('background-color','#F0F'); alert("clicked")});
$('#d3').click(function() { $(this).css('background-color','#00F'); alert("clicked")});

})

for the link click here

It seems that the hover still works and it removes the background color immediately.

Thanks in advance!

解决方案

Well, without too many changes to your code [refactoring]:

$(function() {
    var clickedId = '';

    $('#d1').hover(function() {
        $(this).css('background-color', '#F00'); 
    }, function() { 
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }
    });
    $('#d2').hover(function() { 
        $(this).css('background-color', '#F0F'); 
    }, function() { 
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }     
    });
    $('#d3').hover(function() { 
        $(this).css('background-color', '#00F');
    }, function() {
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }
    });

    $('#d1').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });
    $('#d2').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });
    $('#d3').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });

 })

Changes:

• Use a variable to hold the ID of the last clicked element
• When you click an element, store the id of that clicked element. Also, set all elements (except the one you clicked) back to the original background color.
• On hover out, check if the element losing hover is the id of the last clicked element (if it is, don't change its background back).

As an aside, I would probably use CSS classes and set .active to the clicked elements, and use .test:hover. But I assume this was a rudimentary JavaScript example for learning purposes.

And if you wanted to see the one with CSS: http://jsfiddle.net/MgTr4/1/

这篇关于处理jQuery悬停行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！