По-прежнему возникают проблемы с JQuery Image Rollovers - PullRequest
Новая
       11

По-прежнему возникают проблемы с JQuery Image Rollovers

0 голосов
/ 05 августа 2009

Хорошо, у меня все еще есть некоторые проблемы с этим кодом ниже. Я получил некоторые рекомендации от некоторых пользователей SO, и я ценю это.

Однако я все еще озадачен тем, что я делаю здесь неправильно. У меня есть базовый сценарий JQuery ролловер с использованием изображений. Тем не менее, когда пользователь щелкает одно из изображений, я хочу, чтобы это изображение оставалось в состоянии «активен / нажат». Если щелкнуть другое изображение, я хочу, чтобы оно было в активном / нажатом состоянии, а ранее активное / нажатое изображение вернулось в отключенное состояние.

В принципе, я хочу, чтобы это работало как вкладка «Выкл., Вкл., Активно». Код ниже работает за исключением кликов. Когда я нажимаю на изображение, оно становится «активным». Но когда я нажимаю на другое изображение, оно не переключает ранее щелкнутое изображение, поэтому я получаю все изображения в «активном» состоянии. Я перепробовал все, что мог придумать, и искал ответ в Google, но все, что я пробую, заканчивается тем же результатом. Все изображения остаются «активными» при нажатии вместо переключения.

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

$(document).ready(function() {
var sel;
    $("#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");
        });
    //handle clicks
    }).click(function() {
        if( sel != null ) {
        $(this).children("img").each(function() {
            this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif");

        });
        }
        $(this).children("img").each(function() {
            this.src = $(this).attr("src").replace(/_on.gif$/ig,"_clk.gif");
        })
        sel = this;
    });


}); 


</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>

1 Ответ

1 голос
/ 05 августа 2009

Ну, - Ваша функция щелчка должна будет просмотреть все изображения в #nav, чтобы увидеть, какое из них было нажато, и отключить его.

Вместо: 

$(this).children("img").each(function() {
            this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif");

        });

Попробуйте: 

$("#nav").find("img").each(function() {
  this.src = this.src.replace(/_clk\.gif$/i, "_off.gif");
});

Также - две вещи, на которые следует обратить внимание: во-первых, символ . должен быть экранирован \. в вашем регулярном выражении. Второе: если вы используете this.src = почему бы просто не заменить на this.src?

...