Javascript 在ajax中成功后如何更改文本

我想在提交表单后更改文本。当我点击

提交给朋友1

时，我想将文本更改为

邀请给朋友

，但不更改

提交给朋友2

。当我点击

submittofriend2

，然后更改

submittofriend2

的文本

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

$（文档）.ready（函数（）{
$（“.flip”）。单击（函数（）{
$（this.next（）.find（“.panel”）.slideToggle（“slow”）；
});
});
函数send_to_friend（）{
$.ajax({
类型：“post”，
url:“mail.php”，
数据：dataString，
cache:false，
成功：功能（数据）{
$（“.panel”）.slideUp（“慢”）；
$（'.flip'）.html（“邀请您的朋友”）；
}
});                  
返回false；
}

我的表格在这里

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

.翻转{
光标：指针；
字体系列：“开放式Sans”、Arial、Sans serif；
颜色：#2ea3f2；
文字装饰：下划线；
字体大小：14px；
}
.小组{
保证金：5px0；
填充：21px；
显示：无；
背景色：#f6f6f6；
边框：实心1px#c3c3；
}
.submitfield_风格{
宽度：87px；
高度：29px；
边框：1px实心#ccc；
背景：#fff；
颜色：#999；
光标：指针；
}
发送给朋友1
发送给朋友2

两个

元素使用相同的类标识符。它将更改这两个的文本。您需要在Ajax代码中使用不同的标识符来更改文本。

因为您对这两个元素使用相同的类

flip

，它将同时更改这两个元素

您可以在这些元素上使用不同的类，也可以向

中使用的元素添加一个属性，以明确区分它

像

---

Send to a Friend 1

由于您将操作应用于特定的

类

，因此它将应用于具有所选类的所有元素。您可以通过使用

closest（）和prev（）函数（如


$（文档）.ready（函数（）{
$（“.flip”）。单击（函数（）{
$（this.next（）.find（“.panel”）.slideToggle（“slow”）；
});
$（'input[name=“submit”]”）。在（'click'，函数（e）{
$（这个）。最近的（'.panel'）。slideUp（“慢”）；
$（this）.closest（'.panel'）.prev（'.flip'）.html（'邀请您的朋友'）；
e、 预防默认值（）；
})
});

发送给朋友1
发送给朋友2
您是否尝试过该解决方案，如果您有任何疑问，请告诉我。亲爱的，我的任务是，首先单击
发送给朋友
，然后向下翻写您写邮件和写电子邮件地址的位置，如果按“提交”按钮，则向朋友发送邮件，然后将
邀请发送给朋友
改为
发送给朋友
。。。。（a） 页面不重新加载（b）在页面不知道有多少
发送给朋友（c）HTML代码不更改的意思是这样的