ブラウザを更新せずにreplaceWithを使用してボタンを同時にクリックする

ブラウザを更新せずにボタンを同時にクリックする方法を理解しようとしています。私が気付いたのは、ボタンの1つをクリックして、それが働いていて、新しい値を.replaceWithを使用して置き換えることに気付きました。しかし、別のボタンをクリックしても別の値は得られません。ブラウザを更新せずにreplaceWithを使用してボタンを同時にクリックする

コード：

<body> 
<input type = "button" id = "bt1" value = "See my Full Name :)"> 
<input type = "button" id = "bt2" value = "See my Nickname :)"> 

<div> 
    <div class = "name">See my name</div> 
</div> 

<script> 

    $(document).ready(function() 
    { 
     $("#bt1").click 
     (
      function() 
      { 
       $("div.name").replaceWith("<div>John Francis</div>"); 
       alert("Your full name is John Francis"); 
      } 
     ); 

     $("#bt2").click 
     (
      function() 
      { 
       $("div.name").replaceWith("<div>Francis</div>"); 
       alert("Your nickname is Francis"); 
      } 
     ); 
    }); 

</script>

出典

2016-05-03 Francisunoxx

あなたが代わる新たに挿入されたDIVにクラス名.nameを追加していないので、次回は、あなたがクリックし、クラスを持つ要素がありません.name。

それだけでテキストを更新するために、多くの方が簡単だろうあなたは（あなたがいない）replaceWith を使用する必要が何らかの理由で、ちょうどクラスを追加する場合

$(document).ready(function() { 
    $("#bt1").click(function() { 
     $(".name").text("John Francis"); 
     alert("Your full name is John Francis"); 
    }); 

    $("#bt2").click(function() { 
     $(".name").text("Francis"); 
     alert("Your nickname is Francis"); 
    }); 
});

FIDDLE

$(document).ready(function() { 
    $("#bt1").click(function() { 
     $(".name").replaceWith("<div class='name'>John Francis</div>"); 
     alert("Your full name is John Francis"); 
    }); 

    $("#bt2").click(function() { 
     $(".name").replaceWith("<div class='name'>Francis</div>"); 
     alert("Your nickname is Francis"); 
    }); 
});

FIDDLE

出典

2016-05-03 08:35:02 adeneo

'.replaceWith'の代わりに' .text'を使用する理由は '.replaceWith'を使用する方法ですか？ – Francisunoxx

私はあなたの2番目のフィドルに投票します。すばらしいです。 – Atula

$(document).ready(function() 
{ 
    $("#bt1").click 
    (
     function() 
     { 
      $('div.name').text("") 
      $("<div>John Francis</div>").appendTo('div.name'); 
      alert("Your full name is John Francis"); 
     } 
    ); 

    $("#bt2").click 
    (
     function() 
     { 
      $("div.name div").replaceWith("<div>Francis</div>"); 
      alert("Your nickname is Francis"); 
     } 
    ); 
});

出典

2016-05-03 08:46:40 user3045179

ブラウザを更新せずにreplaceWithを使用してボタンを同時にクリックする

答えて

関連する問題