Может кто-нибудь, пожалуйста, помогите с этим кодом Jquery

Я пытался заставить этот код работать некоторое время и не могу понять, что не так. Это для трех состояний ролловера с изображениями. (Я знаю, что я могу сделать это с помощью CSS, поэтому, пожалуйста, не отвечайте на это.) Цель в том, чтобы я пытался выучить jquery и, как часть обучения, я пытаюсь выяснить, чего мне здесь не хватает.

У меня проблемы с тем, когда вы делаете события mouseover и mouseout, кнопки выделяются правильно. Однако, когда я нажимаю на кнопку, затем нажимаю на другую кнопку, все кнопки, на которые я нажимаю, остаются. Я должен быть в состоянии включить состояние, как при нажатии на каждое изображение, как обычный элемент управления вкладки.

Я знаю, что есть лучшие способы сделать это, но я действительно пытаюсь понять, что я сделал неправильно, и я крайне разочарован. Так что если есть кто-то, кто может помочь конкретно исправить код, который я публикую, я был бы очень признателен. Опять же, я знаю, что это может быть достигнуто с помощью определенных методов CSS, но я хотел бы понять, что я делаю здесь неправильно.

Заранее спасибо.

$(document).ready(function() {
var clicked_obj;
    $("#nav a").mouseover(function() {
        if ( $(this).data("clicked") ) { return; }
        $(this).children("img").each(function() {
            this.src = $(this).attr("src").replace(/_off.gif$/ig,"_on.gif");
        });
    }).mouseout(function() {
        if ( $(this).data("clicked") ) { return; }
        $(this).children("img").each(function() {
            this.src = $(this).attr("src").replace(/_on.gif$/ig,"_off.gif");
        });
    }).click(function() {
        if ( clicked_obj ) {
            $(clicked_obj).removeData("clicked").mouseout();
        }
        clicked_obj = this;
        $(this).data("clicked", true);
        $(this).children("img").each(function() {
            this.src = $(this).attr("src").replace(/_off.gif$/ig,"_clk.gif");
        });
    });

});


</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
    <body>
        <div id="nav">
            <div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0"  /></div>
            <div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22"  alt="Support" name="support" border="0"/></a></div>
            <div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div>
            <div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div>
        </div>
    </body>
</html>
Источник

1 ответ

Решение

Вы должны делать именно то, что, как вы думаете, вы должны делать:) (прелесть jquery:)... удалить выбранное состояние из ранее нажатой кнопки при нажатии на новую.... Вот версия, в которой вместо этого используются стили изображений, но вы должны иметь возможность изменить класс добавления / удаления для изменения изображений

var sel;
$(document).ready(function() {
    $("#nav a")
    .mouseover(function() {
        $(this).addClass("mouseOver");
    })
    .mouseout(function() {
        $(this).removeClass("mouseOver");
    })
    .click(function() {
        if( sel != null ) {
            $(sel).removeClass("selected");
        }
        $(this).addClass("selected");
        sel = this;
    });
});
Источник
Другие вопросы по тегам