1

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

.test { background-color: #ccc;}
<div class="test" id="d1"></div>
<div class="test" id="d2"></div>
<div class="test" id="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'); });
$('#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")});

})

链接点击这里

似乎悬停仍然有效，它会立即删除背景颜色。

提前致谢！

4

5 回答 5

2

好吧，无需对代码进行太多更改[重构]：

$(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");
    });

 })

变化：

  • 使用变量来保存最后点击元素的 ID
  • 当您单击一个元素时，存储该单击元素的 id。此外，将所有元素（除了您单击的元素）设置回原始背景颜色。
  • 在悬停时，检查丢失悬停的元素是否是最后一次单击元素的 id（如果是，请不要将其背景更改回来）。

顺便说一句，我可能会使用 CSS 类并设置.active为单击的元素，然后使用.test:hover. 但我认为这是一个用于学习目的的基本 JavaScript 示例。

如果你想看一个有 CSS 的：http: //jsfiddle.net/MgTr4/1/

于 2013-09-03T20:35:56.730 回答
1

HTML

<div class="test" data-selected-item="d1" id="d1"></div>
<div class="test" data-selected-item="d2" id="d2"></div>
<div class="test" data-selected-item="d3" id="d3"></div>

CSS

.test { margin-left: 50px; background-color:#CCC; height: 50px; width: 50px; float: left; margin-top: 50px; }
.d1 { background-color : #F00 !important;}
.d2{ background-color : #F0F !important;}
.d3 { background-color : #00F !important;}

JS

  $(function() {
    $('.test').click(function() {
        $(this).hasClass($(this).data('selected-item')) ? $(this).removeClass($(this).data('selected-item')) : $(this).addClass($(this).data('selected-item'));
    });
});

示例 http://jsfiddle.net/sheeban/gEftm/3/

于 2013-09-03T20:57:01.937 回答
0

您可以通过使用类、jQuery 方法.addClass和.removeClass

在这里工作 jsFiddle

HTML：

<div class="test" id="d1" mycolor='#F00'></div>
<div class="test" id="d2" mycolor='#F0F'></div>
<div class="test" id="d3" mycolor='#00F'></div>

jQuery/javascript：

$('.test').hover(
    function() {
        if ($(this).hasClass('stick') == false) {
            $(this).css('background-color', $(this).attr('mycolor') );
        }
    },function() {
        if ($(this).hasClass('stick') == false) {
            $(this).css('background-color', '#CCC');
        }
});
$('div').click(function() {
    $('div').removeClass('stick');
    $(this).addClass('stick');
});

CSS：

.test { background-color: #ccc;}
div{width:150px;height:80px;margin:5px;}

为了进一步简化它，您可以class="test"从所有 DIV 中删除 ，并将悬停选择器更改为：

$('div').hover( etc etc

这不会干扰click在同一选择器集合上检测事件。

于 2013-09-03T20:39:12.227 回答
0

在这里，您可以使用一个非常简单的解决方案：

现场演示

  $('.test').hover(function( e ){
    var hc = $(this).hasClass('test');
    $(this).css({ backgroundColor : (e.type=="mouseleave" && hc) ? '#ccc' :  $(this).data('c') });
  }).click(function(){
    $(this).toggleClass('test test2 ');
  });

有这个 HTML：

<div class="test" id="d1" data-c="#f00"></div>
<div class="test" id="d2" data-c="#f0f"></div>
<div class="test" id="d3" data-c="#00f"></div>

和 CSS 中的两个类：

.test, .test2{
于 2013-09-03T20:40:01.633 回答
-1

在这种情况下最好使用 css。JavaScript 解决方案更复杂。在您的情况下，您可以更改“悬停”代码块并将其更改为 css 规则：

#d1:hover { background-color: #F00; }
#d2:hover { background-color: #F0F; }
#d3:hover { background-color: #00F; }

这是一个示例：jsFiddle，编辑后：jsFiddle2

于 2013-09-03T20:38:15.080 回答