Jqueryボタンの値を切り替える

Question

jqueryを初めて使用しました。私は、ボタンをクリックしたときに入力フィールドを切り替えることを試みていました。ボタンの値も変更しました。ここで、入力フィールドをクリックすると、ボタンが変更され、値が変更されます。ボタンを2回クリックしたときに値を元に戻したい。

これは意味がありますか？ここで

はコードです：

$(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つの値を持つ属性設定することができます一致するかどうか

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

Answer 2

あなたはアイテムが現在表示されているかどうかを判断するために:visibleを使用することができます。あなたがトグルを使用しているとして、あなたはすぐにこれを行うことができます：

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

更新スニペット：

$(document).ready(function() { 
 

 
    $('#submit').click(function() { 
 
    $('#hello').toggle(); 
 
    $('#submit').val($('#hello').is(":visible") ? "I love you again" : "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 3

ボタンのテキストの値のクイックチェックそのトリックを行います。

$(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'); 
 
    } 
 
}); 
 

 
});

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

http://api.jquery.com/toggle/

.toggle（）はそのここでやって何をしている、マッチした要素を表示するか隠すために使用される）（.toggleのドキュメントを参照してください。..州質問の期待される機能

Answer 5

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

多分あなたはこれを試すことができます：

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