JQuery с на выкл и нажмите состояние с помощью изображений

Question

Привет я пытаюсь сделать ролловер три состояния с помощью jquery. Я хочу, чтобы состояние выключено и щелкнуло состояние.

Я должен повторить определенный стиль интерфейса и не использовать изображения в не вариант. Ниже приведен код, который я использовал. Тем не менее, я не могу понять, как деактивировать изображение при нажатии другого.

Вот сценарий.

1) Пользователь наводит курсор на изображение, которое активирует изображение в состоянии. 2) Пользователь перемещает это изображение и переходит к другому изображению. Предыдущее активное изображение выключено, а изображение, над которым в данный момент находится курсор, включено. 3) Пользователь щелкает изображение, которое активирует изображение состояния щелчка, однако, когда пользователь щелкает другое изображение, ранее щелкнутое изображение возвращается в выключенное состояние.

Я могу сделать это с помощью Javascript, однако, я новичок в Jquery и с трудом пытаюсь это выяснить.

Вот код:

$(document).ready(function() {
   // Navigation rollovers
   $("#nav a").mouseover(function(){
        imgsrc = $(this).children("img").attr("src");
        matches = imgsrc.match(/_on/);
        // don't do the rollover if state is already ON
        if (!matches) {
           imgsrcON = imgsrc.replace(/.gif$/ig,"_on.gif");
           // strip off extension
           $(this).children("img").attr("src", imgsrcON);
        }
    });
    $("#nav a").mouseout(function(){
        $(this).children("img").attr("src", imgsrc);
    });
    // Navigation clicks
    $("#nav a").click(function(){
        imgsrc = $(this).children("img").attr("src");
        clkmatches = imgsrc.match(/_on/);
        // don't do the rollover if state is already ON
        if (!clkmatches) {
            imgsrcCLK = imgsrc.replace(/.gif$/ig,"_clk.gif");
            // strip off extension
            $(this).attr("src", imgsrcCLK);
        }
    });     
});

Answer 1

Этот кусок кода должен выполнить то, что вы ищете. Хотя я не проверял его правильность (поскольку в настоящее время я должен работать!), Он должен по крайней мере проиллюстрировать способ сделать это.

var clicked_obj;
$("#nav a").mouseover(function() {
    if ( $(this).data("clicked") ) { return; }
    $(this).children("img").each(function() {
        this.src = "<path to mouseover image>";
    });
}).mouseout(function() {
    if ( $(this).data("clicked") ) { return; }
    $(this).children("img").each(function() {
        this.src = "<path to original image>";
    });
}).click(function() {
    if ( clicked_obj ) {
        $(clicked_obj).removeData("clicked").mouseout();
    }
    clicked_obj = this;
    $(this).data("clicked", true);
    $(this).children("img").each(function() {
        this.src = "<path to clicked image>";
    });
});

Answer 2

Чтобы уточнить, если изображение было нажато, вы хотите, чтобы оно оставалось в состоянии щелчка, даже если щелкнуло другое изображение?

Если это так, я бы добавил класс при щелчке по изображению, а затем в проверке, чтобы удалить состояние, выполните проверку, чтобы увидеть, присутствует ли этот класс на изображении.

ех.

$('item').click(function(){$(this).addClass('clicked');}
$('other_item').click(function(){
     $('all_items') -- if class != 'clicked' 
         { go ahead and revert it to a normal state, otherwise don't touch it}

Надеюсь, мой псевдокод имеет смысл.