Изменить Javascript для включения: проверено вместо: hover - hoverizr - PullRequest
Новая
       20

Изменить Javascript для включения: проверено вместо: hover - hoverizr

0 голосов
/ 21 марта 2012

Я пытаюсь изменить hoverizr (плагин jQuery), чтобы он срабатывал на :checked вместо :hover.Автор hoverizr сказал, что это легко сделать, но у него нет времени, чтобы написать это, и я неопытен в JavaScript.

Я задал похожий вопрос относительно stackoverflow, но это касалось сценария обмена изображениями, а hoverizr использует canvas для создания эффектов изображения

Мне нужен hoverфункциональность, которая должна быть заменена на :checked скрытой радиокнопки.Вы можете видеть, что я имею в виду на моем сайте .Я использую радиоблоки :checked и псевдо-классы для фильтрации на моем сайте.Когда изображения отфильтрованы, я хочу, чтобы изображения выглядели цветными.Вот где приходит hoverizr.

По сути, мне нужно связать проверенное событие вместо события hover.Есть небольшой стекопоток post , который касается этого НО, этот пост находится на флажках, и мне нужно использовать переключатели.

Итак, здесь - это JavaScriptдля hoverizr (событие hover находится внизу кода)

Ответы [ 2 ]

1 голос
/ 21 марта 2012

Оба флажка и переключатели являются типами ввода.Таким образом, вы можете прослушивать события изменения для них:

Пример скрипта: 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');
    }
});​

Изменить ховеризр напрямую не должно быть слишком сложно, но вы должны помнить две вещи:

  1. бросок события 'hover'два события вместе: mouseenter и mouseleave.Ваша логика должна только слушать событие change, поэтому ваши условия будут оцениваться и вкладываться по-разному.

  2. вам нужно заранее решить, как вы хотите, чтобы переключатели работали.Если они типа «включи один раз и все» (как в моем примере), достаточно просто.В противном случае вам нужно будет добавить логику, чтобы определить, что делать на основе значения выбранного радио.

[добавлено] FWIW, если вы будете слушать щелчок вместо изменения, вы будетеполучить тот же чистый результат.

0 голосов
/ 21 марта 2012

Быстрый пример, как прокомментировано выше. 

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
}
...