Question

我正在尝试更改hoverizr（jQuery插件），以便在:checked上而不是在:hover上触发。 hoverizr的作者说它可以很容易地完成，但他没有时间写它，我对JavaScript没有经验。

stackoverflow上的

I have asked a similar question，但这与图像交换脚本有关，而hoverizr使用canvas来创建图像效果

我需要将hover功能换成:checked隐藏的单选按钮。你可以在my website看到我的意思。我使用:checked单选框和伪类在我的网站上进行过滤。过滤图像时，我希望图像显示为彩色。这就是hoverizr进来的地方。

基本上我需要绑定一个checked事件而不是一个悬停事件。有一个小的stackoverflow post触及了它但是，这篇文章是在复选框上，我需要使用单选按钮。

所以，here是hoverizr的JavaScript（悬停事件位于代码的底部）

Answer 1

复选框和单选按钮都是输入类型。因此，您可以监听它们的变更事件：

示例小提琴：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不应该太难，但你需要记住两件事：

'hover'事件将两个事件一起滚动：mouseenter和mouseleave。您的逻辑只需要监听change事件，因此您的条件将被评估并以不同方式嵌套。
您需要事先决定单选按钮的行为方式。如果它们是“开启一次就是它”的类型（根据我的例子），很容易。否则，您必须添加逻辑以根据所选无线电的值确定要执行的操作。

[补充] FWIW，如果您听取点击而不是更改，您将获得相同的净结果。

Answer 2

上面评论的快速示例。

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
}

修改javascript以触发：检查而不是：hover - hoverizr

2 个答案: