Question

我是jquery的新手。单击按钮时，我试图切换输入字段。我也改变了按钮的值。现在，当我单击输入字段隐藏和按钮值更改时。我想要在单击按钮两次时恢复该值。

这有意义吗？

以下是代码：

$(document).ready(function() {

  $('#submit').click(function() {
    $('#hello').toggle();
    $('#submit').val("I don't love you");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text">
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>

Answer 1

您可以使用要显示的2个值设置数据属性，并根据其中一个值检查当前值，并根据它是否匹配进行切换。

＆＃13;

  <input id="hello" type="text">
  <input type="text">
  <input type="text">
  <input id="submit" type="button" data-default="love you" data-alt="i dont love you" value="love you"></button>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>
    $(document).ready(function() {
      var $submit = $("#submit"),
          def = $submit.data('default'),
          alt = $submit.data('alt');
      $submit.on("click", function() {
        $("#hello").toggle();
        ($submit.val() == def) ? $submit.val(alt) : $submit.val(def); 
      });
    });
  </script>

＆＃13;

Answer 2

您可以使用:visible来确定当前是否显示该项目。当您正在使用切换时，您可以立即执行以下操作：

$("#hello").is(":visible") ? "text on visible" : "text on hidden"

更新了代码段：

＆＃13;

$(document).ready(function() {

  $('#submit').click(function() {
    $('#hello').toggle();
    $('#submit').val($('#hello').is(":visible") ? "I love you again" : "I don't love you");
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text">
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>

＆＃13;

Answer 3

快速检查按钮中文本的值将起到作用。

＆＃13;

$(document).ready(function(){

$('#submit').click(function(){
$('#hello').toggle();
    var submitButton = $('#submit');
    if(submitButton.val() === 'I dont love you'){
      submitButton.val('love you');
    } else {
      submitButton.val('I dont love you');
    }
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text" >
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>

＆＃13;

Answer 4

<script>
$(document).ready(function(){

    var clicked = false;
    var msg1 = "love you";
    var msg2 = "love you, but not".

    $('#submit').click(function(){
        clicked = !clicked;
        $('#submit').val(clicked ? msg1 : msg2);
    });

});

</script>

Answer 5

也许你可以试试这个：

gulp-iconfont

Answer 6

请参阅.toggle（）http://api.jquery.com/toggle/

的文档

.toggle（）用于显示或隐藏匹配的元素，这就是它在这里做的事情。陈述问题中的预期功能

Jquery按钮值切换

6 个答案: