優先jQuery功能重寫另一

使用jQuery，我試圖編程搜索菜單按鈕內的2種不同類型的反饋。問題是2需要衝突的代碼：優先jQuery功能重寫另一

首先，顯示紅色按鈕是「可點擊」的，當鼠標進入時將其改變爲不同的顏色（藍色），然後將其更改回原始顏色（紅色）當鼠標離開它：

$('.buttons').mouseenter(function() { 
    $(this).css("background-color", "blue"); 
}); 
$('.buttons').mouseleave(function() { 
    $(this).css("background-color", "red"); 
});

其次，表明某個按鈕被「點擊」通過改變按鈕，可將第三顏色（黃色）。我希望按鈕保持黃色，直到點擊新的/不同的按鈕。發生這種情況時，我希望新點擊的按鈕變爲黃色，其他所有按鈕恢復爲原始顏色（紅色）。

$(".buttons").click(function() { 
$(".buttons").css("background-color", "red"); 
$(this).css("background-color", "yellow"); 
});

這一切都很好地工作，直到鼠標離開點擊按鈕移動到另一個。發生這種情況時，mouseleave將黃色按鈕變回紅色。

有沒有一種方法來優先考慮jQuery命令？我應該使用另一個函數嗎？非常感謝！

來源

2014-05-21 katestrykermcm

是不是有一個原因，你不能用CSS做到這一點，只是點擊事件添加一個類來改變顏色黃色？ – Ballbin

您應該使用類而不是.css()函數。它更簡單。使用這樣的事情：

$('.buttons').hover(function(){ 
    $(this).toggleClass('hover'); 
}).on('click', function(){ 
    $('.buttons').removeClass('click').filter(this).addClass('click'); 
})

有了這些CSS：

.buttons{ 
    background-color : red; 
} 

/* 
Could also be .buttons:hover an then remove the JS 
Much more efficient 
*/ 
.buttons.hover{ 
    background-color : blue; 
} 

.buttons.click{ 
    background-color : yellow; 
}

小提琴：http://jsfiddle.net/Re9bj/12/

來源

2014-05-21 18:56:50

感謝您的幫助！這個缺點是即使點擊一個新按鈕，點擊按鈕仍保持黃色。我只想最近點擊的按鈕保持黃色。 – katestrykermcm

錯過了您的問題中的這一點，修復它。 –

效果很好。謝謝！ – katestrykermcm

給點擊的按鈕的ID，然後檢查ID在鼠標離開

繼承人jsfiddle

$('.buttons').mouseenter(function() { 
    $(this).css("background-color", "blue"); 
}); 
$('.buttons').mouseleave(function() { 
    if ($(this).attr("id") == "clicked") { 
     $(this).css("background-color", "yellow"); 
    } else { 
     $(this).css("background-color", "red"); 
    } 
}); 

$(".buttons").click(function() { 
    $(".buttons").css("background-color", "red"); 
    $(".buttons").attr("id",""); 
    $(this).css("background-color", "yellow"); 
    $(this).attr("id","clicked"); 
});

來源

2014-05-21 18:56:58

謝謝！我很高興能夠更多地瞭解jQuery的可能性。不過，由於其他人的評論，我認爲我將改用CSS來提高效率。 – katestrykermcm

@ user3064186不用擔心:) –

我會建議使用CSS類來實現這一點。

Working example

CSS：

.buttons { 
    background-color: red; 
} 
.buttons:hover { 
    background-color: blue; 
} 
.clicked { 
background-color: yellow !important; 
}

的Javascript：

var $buttons = $('.buttons') 
$buttons.click(function() { 
    $buttons.removeClass('clicked'); 
    $(this).addClass('clicked'); 
});

HTML：

<button class='buttons'>Button 1 </button> 
<button class='buttons'>Button 2 </button> 
<button class='buttons'>Button 3 </button> 
<button class='buttons'>Button 4 </button>

來源

2014-05-21 19:05:36 Jashwant

優先jQuery功能重寫另一

回答

相關問題