修改JavaScript觸發：檢查，而不是：hover - hoverizr

我想改變hoverizr（jQuery插件），以便它在:checked而不是:hover上觸發。 hoverizr的作者說，它可以很容易地完成，但他沒有時間寫它，而我對JavaScript沒有經驗。修改JavaScript觸發：檢查，而不是：hover - hoverizr

I have asked a similar question計算器上，但是這是關於圖像互換腳本，hoverizr使用畫布創建圖像效果

我需要的hover功能被換了一個隱藏的單選按鈕的:checked。你可以在my website上看到我的意思。我使用:checked廣播箱和僞類在我的網站上進行過濾。當圖像被過濾時，我希望圖像顯示爲彩色。這是hoverizr進來的地方。

基本上我需要綁定一個選中的事件，而不是一個懸停事件。有一個小的計算器post接觸那但是，這篇文章是在複選框，我需要使用單選按鈕。

所以，here是JavaScript爲hoverizr（懸停事件是在代碼的底部）

來源

2012-03-21 davecave

你不能使用.click（）與a並檢查其當前狀態，然後再決定應執行哪個操作？ – CBusBus 2012-03-21 01:38:35

所以onclick（），如果：選中，然後觸發事件？聽起來不錯，但我不知道如何寫出來。 – davecave 2012-03-21 01:50:02

現在不是觸發點擊而不是懸停？對不起，我不明白你的問題:( – 2012-03-21 01:57:02

兩個複選框和單選按鈕被輸入的類型。因此，你可以聽他們改變事件：

樣品小提琴：http://jsfiddle.net/kbHSD/1/

HTML：

<div>A sample div</div> 

<input type="checkbox" name="checkbox"/><label for="checkbox">Some checkbox</label><br/> 
<input type="radio" name="radio" value="enable"/>Enable green!<br/>

CSS：div {background-color: gray; width: 200px; height: 200px}

JS：

var theDiv = $('div'); 
$('input').change(function() { 
    if (this.checked) { 
     theDiv.css('background-color', 'lime'); 
    } else { 
     theDiv.css('background-color', 'gray'); 
    } 
});

要直接修改hoverizr不應該太難，但你需要rem餘燼兩件事：

「懸停」事件一起滾動兩個事件：mouseenter和mouseleave。你的邏輯只需要聽取change事件，所以你的條件將被評估和嵌套不同。
您需要事先決定您希望單選按鈕的行爲。如果他們是「打開一次，那就是」類型的事情（按照我的例子），很容易。否則，您必須添加邏輯以根據所選無線電的值確定要執行的操作。

[添加] FWIW，如果你聽的點擊，而不是改變，你會得到相同的淨結果。

來源

2012-03-21 01:55:31

上面評論的快速示例。

var rb = document.createElement("input") 
document.body.appendChild(rb) 
rb.type = "radio" 
rb.id = "sample" 
rb.onclick = function() 
{ 
    if(this.checked) 
    //Do your thing, remember to toggle values 
}

來源

2012-03-21 01:59:23 CBusBus

修改JavaScript觸發：檢查，而不是：hover - hoverizr

回答

相關問題