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>

我的表格在这里..

<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

您对<h>元素使用相同的类标识符。它将改变两者的文本。您需要使用将在Ajax代码中使用的不同标识符来更改文本。

Answer 2

因为您对两个元素都使用相同的类flip，所以它们都会改变它们。

您可以对这些元素使用不同的类，或者您可以向<h5>中使用的元素添加属性以明确区分它。

像......那样的东西。

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

Answer 3

由于您要将操作应用于特定class，因此该操作将应用于具有selected class的所有元素。您可以使用closest() and prev()函数（如

）定位最后一个元素，从而避免这种情况

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

您还没有关闭<h5>标记我在jquery中编写了上面的onClick处理程序，您可以尝试使用相同的方法。唯一的问题是你需要访问被点击元素的DOM。

如何在ajax成功后更改文本

3 个答案: