2016-12-29 27 views
1

我想在提交表單後更改文本。我希望當我點擊submit to friend 1然後文本更改爲Invited to Your friend但不改變submit to friend 2。當我點擊submit to friend 2,然後更改submit to friend 2的文本。如何在ajax成功後更改文本

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

我的形式是在這裏..

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

回答

1

您正在使用相同的類標識符予<h>元素。它會改變兩者的文字。您需要使用您將在Ajax代碼中使用的不同標識符來更改文本。

0

因爲你使用的是同一類flip兩個元素,它會改變兩者。

你可以對這些元素使用不同的類,或者你可以將屬性添加到您在使用<h5>具體區分的元素。

喜歡的東西....

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

0

因爲你申請的動作特定class,它適用於所有具有selected class的元素。您可以通過像

$(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()功能的最後一個元素避免這種情況,你沒有關閉<h5>標籤 我已經寫了jQuery中的onClick處理程序上面,你可以試試與您使用的方式相同。唯一的問題是你需要訪問點擊元素的DOM。

+0

你嘗試解決方案,讓我知道如果您有任何疑問。 –

+0

親愛的我的任務是,在'第一次點擊發送到friend'然後翻轉向下,你寫郵件,寫一個電子郵件地址,如果按下提交按鈕發送郵件給朋友,然後寫'邀請到您的朋友''而不是發送到friend' ....(一)頁面不會重新加載(b)在頁面不知道有多少'發送到friend'(C)HTML代碼不改變這樣的手段 –