JqueryAjax形式select改变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);  
}
});
});
});

我的表单页面test.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 淡出。当我 select 另一个 select 时，什么也没有出现，我必须刷新页面.. 如果另一个 select 被 selected，我想再次显示带有淡出的消息。

有人有想法吗？

非常感谢:)

Answer 1

在这种情况下，我会在您的模板中为通知创建跨度，给它自己的 ID，并在需要时 .fadeIn()/.fadeOut() 它。

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

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

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

其次，长时间淡出看起来不太友好，我最好使用.delay()

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

JqueryAjax形式select改变div淡出错误

Jquery Ajax form select change div fadeout error

html

ajax

jquery

json

show