Значение кнопки jQuery

Question

У меня есть кнопка ("#btnchangepass"), значение кнопки "show". Если я нажму кнопку, значение должно измениться в "hide", если я нажму кнопку еще раз, когда значение изменится, как это было в начале в "show".

Я написал этот код, но я не знаю, как я могу вернуть начальное значение кнопки. Может кто-нибудь дать мне руку?

Кнопка не скрывает, это всего лишь значение кнопки, имя, отображаемое на кнопке, равно hide и show.

$('#btnshowhide').click(function(){ 
    $("#btnshowhide").prop('value', 'hide'); 
}); 

Answer 1

Вы можете проверить его состояние и изменить значение соответственно :

$('#btnshowhide').click(function() { 
 
    if ($("#btnshowhide").val() == 'show') { 
 
     $("#btnshowhide").prop('value', 'hide'); 
 
    } else { 
 
     $("#btnshowhide").prop('value', 'show'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="btnshowhide" value="show" />

Fiddle

Answer 2

Просто используйте hide()

$('#btnshowhide').click(function(){ 
    $(this).hide(); 
}); 

ОБНОВЛЕНО:

К сожалению, я не понимаю, так что вам нужно что-то вроде этого:

JSFiddle

HTML:

<input type="submit" value="hide" id="btnshowhide" /> 

JS:

$(document).ready(function() { 
    $('#btnshowhide').click(function() { 
     if ($(this).val() === "hide") { 
      $(this).val("show"); 
     } else { 
      $(this).val("hide"); 
     } 
    }); 
}); 

Answer 3

Если вы используете JQuery < 1.8 Использование:

$('#btnshowhide').toggle(function() { 
    $("#btnshowhide").attr('value', 'hide'); 
}, function() { 
    $("#btnshowhide").attr('value', 'show'); 
}); 

В противном случае, если вы просто хотите скрыть кнопку и показать, используйте тройные операторы:

$('#btnshowhide').click(function() { 
    $(this).attr('value', $(this).attr('value') == 'hide' ? 'show' : 'hide');; 
}); 

Использовать .attr() вместо .prop(), a s последний используется для большей части булевых материалов.

Answer 4

Используйте следующую

$('#btnshowhide').click(function() { 
 
    $(this).prop('value', $(this).prop('value') == 'hide' ? 'show' : 'hide'); 
 
    alert('This has val ' + $(this).prop('value')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnshowhide">button</button>

Answer 5

Я хотел бы предложить использовать data атрибут:

$('#btnshowhide').click(function(){ 
    var val = $(this).val(); 
    var newVal = ""; 

    if(val === "hide") { 
     newVal = $(this).data("show-text"); 
    } else { 
    newVal = $(this).data("hide-text"); 
    } 

    $(this).val(newVal); 
}); 

Answer 6

$('#btnshowhide').click(function() { 
 
    $(this).val($(this).val() === 'show' ? 'hide' : 'show'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="button" id="btnshowhide" value="show" />