2016-05-03 2 views
2

J'essaie de comprendre comment puis-je cliquer sur mon bouton simultanément sans actualiser mon navigateur. J'ai remarqué que si je cliquais sur l'un des boutons, ça fonctionnait et que je remplaçais sa nouvelle valeur en utilisant .replaceWith mais quand je clique sur un autre bouton, ça ne me donne pas une autre valeur.En cliquant sur le bouton en même temps en utilisant replaceWith sans actualiser le navigateur

code:

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

Répondre

2

Vous n'êtes pas d'ajouter le nom de classe .name au nouveau inséré DIV que vous remplacez, donc la prochaine fois que vous cliquez sur, il n'y a aucun élément avec la classe .name.

Il serait beaucoup plus facile de mettre à jour tout le texte

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

Si pour une raison quelconque, vous devez utiliser replaceWith (que vous n'avez pas), il suffit d'ajouter la classe

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

+0

Pourquoi devrais-je utiliser '.text' au lieu de' .replaceWith' est-il possible d'utiliser '.replaceWith'? – Francisunoxx

+0

Je voterais pour votre deuxième violon. Génial. – Atula

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