ajaxでsuccesの後にテキストを変更する方法

Question

フォームを送信した後にテキストを変更したいと思います。 submit to friend 1をクリックしてからInvited to Your friendにテキストを変更しますが、変更しない場合はsubmit to friend 2とします。 submit to friend 2をクリックすると、submit to friend 2のテキストが変更されます。私のフォームはここにある

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $(".flip").click(function(){ 
     $(this).next().find(".panel").slideToggle("slow"); 
     }); 
    }); 

    function send_to_friend(){ 
     $.ajax({ 
       type:"post", 
       url:"mail.php", 
       data:dataString, 
       cache:false, 
       success: function(data){ 
          $('.panel').slideUp("slow"); 
          $('.flip').html("Invited to Your friend");   
         } 
      });     
      return false; 
    } 

</script> 

..あなたは、両方の<h>要素に同じクラス識別子を使用している

<style> 
.flip{ 
    cursor:pointer; 
    font-family: "Open Sans", Arial, sans-serif; 
    color: #2ea3f2; 
    text-decoration:underline; 
    font-size: 14px; 
} 
.panel{ 
     margin:5px 0; 
     padding:21px; 
     display:none; 
     background-color: #f6f6f6; 
     border: solid 1px #c3c3c3; 
} 
.submitfield_style{ 
    width: 87px; 
    height: 29px; 
    border: 1px solid #ccc; 
    background: #fff; 
    color: #999; 
    cursor: pointer; 
} 

</style> 

<h5 class="flip">Send to a friend 1<h5> 
<div class="panel"> 
    <form method="post" action=""> 
     <input type="submit" name="submit" id="submit" class="submitfield_style" onClick="return send_to_friend()"> 
    </form> 
</div> 

    <h5 class="flip">Send to a friend 2<h5> 
    <div class="panel"> 
     <form method="post" action=""> 
      <input type="submit" name="submit" id="submit" class="submitfield_style" onClick="return send_to_friend()"> 
     </form> 
    </div> 

Answer 1

。両方のテキストが変更されます。 Ajaxコードで使用する異なる識別子を使用してテキストを変更する必要があります。

Answer 2

両方の要素に同じクラスflipを使用しているため、両方が変更されます。

これらの要素で異なるクラスを使用することもできますし、具体的に区別するために<h5>で使用する要素に属性を追加することもできます。

あなたが特定のclassにアクションを適用しているので、それはselected classを持っているすべての要素に適用される

<h5 class="flip" flip-elem="1">Send to a Friend 1</h5>

Answer 3

....のようなもの。また、あなたが、私はjqueryの中のonClickハンドラの上に書かれている<h5>タグ を閉じていない、あなたが試すことができ

$(document).ready(function(){ 
 
     $(".flip").click(function(){ 
 
     $(this).next().find(".panel").slideToggle("slow"); 
 
     }); 
 
    
 
     $('input[name="submit"]').on('click', function(e){ 
 
     $(this).closest('.panel').slideUp("slow"); 
 
     $(this).closest('.panel').prev('.flip').html('Invited to Your friend'); 
 
     e.preventDefault(); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h5 class="flip">Send to a friend 1</h5> 
 
<div class="panel"> 
 
    <form method="post" action=""> 
 
     <input type="submit" name="submit" id="submit" class="submitfield_style" > 
 
    </form> 
 
</div> 
 

 
    <h5 class="flip">Send to a friend 2</h5> 
 
    <div class="panel"> 
 
     
 
     <form method="post" action=""> 
 
      <input type="submit" name="submit" id="submit" class="submitfield_style" > 
 
     </form> 
 
    </div>

ようclosest() and prev()機能を使用して最後の要素を標的とすることによって、これを避けることができますあなたが使っているのと同じです。クリックされた要素のDOMにアクセスする必要があることだけです。