Простой способ переключения значения кнопки

Question

Простой способ переключения значения кнопки

0

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

Я хочу, чтобы он сказал "show menu" и "hide menu",

Прямо сейчас я нажимаю, открывается меню и устанавливается новое значение, а меню может закрываться, но значение не возвращается.

JQuery:

$(function () {   
$("#UIcontainer").hide();

$("#button").click(function() {
$("#UIcontainer").toggle( function() {
    $("#button").val('hide menu');
});
  });
});

thomasp423 24 сен. 2013, в 21:23

Источник

Теги:

javascript

jquery

jquery-ui

4 ответа

Ещё вопросы

adeneo · Answer 1 · 2013-09-24T16-58-00.000Z

$(function () {   
    $("#UIcontainer").hide();

    $("#button").on('click', function() {
        $("#UIcontainer").toggle();
        this.value = this.value == 'hide menu' ? 'show menu' : 'hide menu';
    });
});

FIDDLE

Можете ли вы объяснить, что происходит в самой последней строке? Кроме того, я написал небольшое заявление «если еще», которое сработало, но я вижу, как твоя более надежна. Спасибо!
Последняя строка является троичным оператором, и точно так же, как оператор if / else, она устанавливает значение в зависимости от того, какое значение в данный момент есть, с простым javascript, без jQuery!

Nishad K Ahamed · Answer 2 · 2013-09-24T17-48-00.000Z

это будет так. установите атрибут вашей кнопки. например, переключить.

<input type="button" toggle="show">


$(function () {   

    $("#button").click(function() {
        if ($this.attr("toggle")=="show"){
            $("#UIcontainer").show();
            $this.attr("toggle")="hide"
        }
        else{
            $("#UIcontainer").hide();
            $this.attr("toggle")="show"
        }
    });

});

Salim · Answer 3 · 2013-09-24T17-17-00.000Z

Протестировано и работает как шарм

<input type="button" id="button" value="hide menu" />
<div id='UIcontainer'>fladfl</div>

<script type="text/javascript">
$(function () {   
    $("#button").click(function() {
        var val = $(this).val();
        if(val=="hide menu") {
            $("#button").val('show menu');
        } else {
            $("#button").val('hide menu');  
        }
        $("#UIcontainer").toggle();
    });
}); 
</script>

Unknown · Answer 4 · 2013-09-24T17-16-00.000Z

Пытаться:

$(function () {   
$("#UIcontainer").hide();

$("#button").click(function() {
$("#UIcontainer").toggle();
$(this).val($(this).val() == "hide menu" ? "show menu" : "hide menu");
  });
});