Изображения JQuery Toggle Switch - PullRequest
Новая
       22

Изображения JQuery Toggle Switch

1 голос
/ 07 июня 2010

У меня есть ситуация, когда я не понимаю JQuery's Toggle.

У меня есть две кнопки, обе они открывают один и тот же контент, и когда вы нажимаете любую из них, контент должен открываться или закрываться, и атрибут меняет кнопку с открытой на закрытую. (То есть обе кнопки выполняют одну и ту же функцию).

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

Вот очень урезанная версия того, как выглядит мой код, и я был бы признателен за помощь. 

<script language="javascript" type="text/javascript">
    $(function () {

        var open = false;

        $("#button1, #button2").toggle(
            function () {
                open = true;
                $("#button1").attr("src", "images/btn-open.gif");
                $("#button2").attr("src", "images/btn-open.gif");
            },
            function () {
                if (open) {
                    $("#button1").attr("src", "images/btn-closed.gif");
                    $("#button2").attr("src", "images/btn-closed.gif");

                } else {
                    $("#button1").attr("src", "images/btn-open.gif");
                    $("#button2").attr("src", "images/btn-open.gif");

                }
                open = false;

            }
        );


    });
</script>

<img id="button1" src="images/btn-open.gif"></img>
<br />
<br />
<br />
<br />
<img id="button2" src="images/btn-open.gif"></img>

1 Ответ

3 голосов
/ 07 июня 2010

.toggle() будет циклически переключаться между n (обычно 2, но не ограничено 2) предоставленными функциями при каждом нажатии на элемент , но вы хотите один переключатель для обе кнопки, каждая не переключается независимо, поэтому проверьте и используйте .click(), что-то вроде этого: 

var open = false;
$("#button1, #button2").click(function () {
  open = !open; //toggle it
  $("#button1, #button2") //set the src based on the new state
     .attr("src", "images/btn-" + (open ? "open" : "closed") + ".gif");
});

Я также объединил ваши селекторы , чтобы сделать его немного более аккуратным, это тот же эффект, хотя :) Я не уверен на 100% в именах ваших изображений, поэтому вам может потребоваться переключить логическое значение, но Вы поняли идею.

...