Jquery Ajax 表单选择更改 div 淡出错误

Question

我是Ajax的新用户，我对div函数有一点问题。

这是我的代码：

$(document).ready(function() {
$('select.age').change(function(){
            $.ajax({
            type: 'POST',
            url: 'change_age.php',
            data: {selectage: $('select.age').val(), projectId: $('input[name$="projectId"]').val()},
            dataType: 'html',
            success: function()
{
$("#msg_age").html('<span style="color: #00BB00;">Changement OK</span>').fadeOut(4000);  
}
});
});
});

我的表单页测试.php

 <form action="#" method="post">
 <label for="age">Votre Age</label>
 <select class="age" name="age">
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 <option value="24">24</option>
 <option value="25">25</option>
 <option value="26">26</option>
 </select>
 <input class="projectId" type="hidden" name="projectId" value="1"/>
 <div id="msg_age"></div>
 </form>

我的change_age.php

<?php
$query=mysql_connect("localhost","user","pass");
mysql_select_db('database',$query);
$selectage=$_POST['selectage'];
$id=$_POST['projectId'];
$sql='UPDATE tests SET name="'.$selectage.'" WHERE id="'.$id.'"';
mysql_query($sql) or die("Error: ".mysql_error());
?>

当我第一次使用我的表单时，我更改了一个选项，更改是可以的，我等待 4 秒div 淡出。当我选择另一个选择时，什么都没有出现，我必须刷新页面..如果选择了另一个选择，我想再次显示带有淡出的消息。

有人有想法吗？

非常感谢:)

Answer 1

在这种情况下，我会在您的模板中为通知创建 span，为其提供自己的 id，并在需要时.fadeIn()/.fadeOut()它。

更少的 DOM 操作和更好的性能。

因此，您的代码将如下所示：

...
success: function() {
  $("#msg_age").fadeIn(150).fadeOut(4000);  
}

接下来，长时间淡出看起来不友好，我最好用.delay()

...
success: function() {
  $("#msg_age").fadeIn().delay(4000).fadeOut();  
}