Javascript jQuery动态文本（或数据）点击更改问题_Javascript_Jquery_Dynamic Data

Javascript jQuery动态文本（或数据）点击更改问题

javascript jquery

Javascript jQuery动态文本（或数据）点击更改问题,javascript,jquery,dynamic-data,Javascript,Jquery,Dynamic Data,我有一个html文件如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .style1 { background-color: #c3d9ff;

我有一个html文件如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.style1 {
    background-color: #c3d9ff;
    font-family:arial,sans-serif;
}
.style2 {
    text-align: center;
    font-weight: bold;
}
.style3 {
    background-color: #FFFFFF;
    font-family:arial,sans-serif;
    text-align: center;
    font-weight: bold;
}
.style4 {
    background-color: #FFFFFF;
    font-family:arial,sans-serif;
    text-align: left;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
background-color: ;
}
.action_button {
font-weight:bold;
float:right;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function()
{
    $(".action_button").click(function()
    {
    var id = $(this).attr("id");
    var dataString = 'id='+ id ;
    var parent = $(this).parent().parent();
    $.ajax({
        type: "POST",
        url: "action.php",
        data: dataString,
        cache: false,
        success: function()
        {
            if(id % 2)
            {
                parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});
            }
            else
            {
                parent.fadeOut('fast', function()   {$(this).fadeOut();$(this).fadeIn();});
            }
        }
    });
    return false;
    }
);});
$(document).ready(function() {
    $('.action_button').click(function() {
        $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');
        var $col5 = $(this).closest('tr').find('.clickme2');
        $col5.text( $col5.text() == 'Inactive' ? 'Active' : 'Inactive');
        return false;
    });
});
</script>
</head>
<body>
<table style="width: 90%" align="center" class="style1">
<tr>
        <td colspan="7" class="style2">MANAGER</td>
    </tr>
    <tr>
  <td class="style3" style="width: 139px">Col1</td>
  <td class="style3" style="width: 139px">Col2</td>
  <td class="style3" style="width: 139px">Col3</td>
  <td class="style3" style="width: 139px">Col4</td>
  <td class="style3" style="width: 139px">Col5</td>
  <td class="style3" style="width: 200px">Col6</td>
  <td class="style3" style="">Action</td>
 </tr>
</table>
<td id="main" class="main">
 <td class="update">
<table style="width: 90%" align="center" class="style1">
    <tr>
  <td class="style4" style="width: 139px">DataA1</td>
  <td class="style4" style="width: 139px">DataA2</td>
  <td class="style4" style="width: 139px">DataA3</td>
  <td class="style4" style="width: 139px">DataA4</td>
        <td class="style4 clickme2" style="width: 139px">Inactive</td>
  <td class="style4" style="width: 200px">DataA6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Activate</button>
            </td>
   </tr>
   <tr>
  <td class="style4" style="width: 139px">DataB1</td>
  <td class="style4" style="width: 139px">DataB2</td>
  <td class="style4" style="width: 139px">DataB3</td>
  <td class="style4" style="width: 139px">DataB4</td>
        <td class="style4 clickme2" style="width: 139px">Inactive</td>
  <td class="style4" style="width: 200px">DataB6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Activate</button>
            </td>
   </tr>
   <tr>
  <td class="style4" style="width: 139px">DataC1</td>
  <td class="style4" style="width: 139px">DataC2</td>
  <td class="style4" style="width: 139px">DataC3</td>
  <td class="style4" style="width: 139px">DataC4</td>
        <td class="style4 clickme2" style="width: 139px">Active</td>
  <td class="style4" style="width: 200px">DataC6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Inactivate</button>
            </td>
   </tr>
   <tr>
  <td class="style4" style="width: 139px">DataD1</td>
  <td class="style4" style="width: 139px">DataD2</td>
  <td class="style4" style="width: 139px">DataD3</td>
  <td class="style4" style="width: 139px">DataD4</td>
        <td class="style4 clickme2" style="width: 139px">Active</td>
  <td class="style4" style="width: 200px">DataD6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Inactivate</button>
            </td>
   </tr>
   <tr>
  <td class="style4" style="width: 139px">DataE1</td>
  <td class="style4" style="width: 139px">DataE2</td>
  <td class="style4" style="width: 139px">DataE3</td>
  <td class="style4" style="width: 139px">DataE4</td>
        <td class="style4 clickme2" style="width: 139px">Inactive</td>
  <td class="style4" style="width: 200px">DataE6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Activate</button>
            </td>
   </tr>
</table>
</td>
</td>
</body>
</html>


.style1{
背景色：#c3d9ff；
字体系列：arial，无衬线；
}
.style2{
文本对齐：居中；
字体大小：粗体；
}
.style3{
背景色：#FFFFFF；
字体系列：arial，无衬线；
文本对齐：居中；
字体大小：粗体；
}
.style4{
背景色：#FFFFFF；
字体系列：arial，无衬线；
文本对齐：左对齐；
}
身体{
字体系列：Verdana、Arial、Helvetica、无衬线；
字体大小：15px；
背景色：；
}
.行动按钮{
字体大小：粗体；
浮动：对；
}
$（函数（）
{
$（“.action_按钮”）。单击（函数（）
{
var id=$（this.attr（“id”）；
var dataString='id='+id；
var parent=$（this.parent（）.parent（）；
$.ajax({
类型：“POST”，
url:“action.php”，
数据：dataString，
cache:false，
成功：函数（）
{
如果（id%2）
{
fadeOut（'fast'，function（）{$（this.fadeOut（）；$（this.fadeIn（）；}）；
}
其他的
{
fadeOut（'fast'，function（）{$（this.fadeOut（）；$（this.fadeIn（）；}）；
}
}
});
返回false；
}
);});
$（文档）.ready（函数（）{
$（'.action_按钮'）。单击（函数（）{
$（this）.text（$（this）.text（）=='inactive'？'Activate'：'Inactivate'）；
var$col5=$（this.closest（'tr'）。find（'clickme2'）；
$col5.text（$col5.text（）='Inactive'？'Active'：'Inactive'）；
返回false；
});
});
经理
可乐
可乐
可乐
可乐
可乐
可乐6
行动
数据A1
数据A2
数据A3
数据A4
不活跃的
数据6
激活
数据1
数据2
数据3
数据4
不活跃的
数据6
激活
数据C1
数据C2
数据C3
数据C4
活跃的
数据C6
灭活
数据1
数据2
数据3
数据4
活跃的
数据6
灭活
数据1
数据2
数据3
数据4
不活跃的
数据6
激活

该页面包含一个表，每行末尾都有一个按钮。该按钮具有更改文本的功能（即，当用户单击按钮时，按钮上的文本和col5按预定义进行交换）。单击“激活”按钮将按钮文本更改为“停用”，将col5文本更改为“激活”。此外，单击“停用”按钮可将按钮文本更改为“激活”，将col5文本更改为“停用”。但是“停用”按钮并不能很好地完成任务。
php文件action.php在这里不相关，因为它没有打印任何内容

提前谢谢

blasteralfred:）

您需要在您周围的

单击处理程序中存储对该的引用，以便访问在成功处理程序中单击的元素：
success
处理程序中的this
与您的单击处理程序的不同
我喜欢叫它self，你可以随便叫它
另外，在您的success
处理程序中，您应该只在前一个动画完成后执行后续动画，因此我修改了该代码以将淡入淡出序列一个接一个地链接起来
$(".action_button").click(function() {
  var id = $(this).attr("id");
  var self = this;
  var dataString = 'id='+ id ;
  var parent = $(this).parent().parent();
  $.ajax({
      type: "POST",
      url: "action.php",
      data: dataString,
      cache: false,
      success: function()
      {
          if(id % 2)
          {
              parent.fadeOut('fast', function() {
                 $(self).fadeOut('normal', function() { 
                    $(self).fadeIn();
                 }); 
              });
          }
          else
          {
              parent.fadeOut('fast', function() { 
                 $(self).fadeIn('normal', function() { 
                    $(self).fadeOut();
                 }); 
              });
          }
       }
   });
});

对于“停用”按钮的问题，请使用带有text（）函数的修剪。i、 e
$(document).ready(function() {
    $('.action_button').click(function() {
                 $(this).text($.trim($(this).text()) == 'Inactivate' ? 'Activate' : 'Inactivate');
        var $col5 = $(this).closest('tr').find('.clickme2');
        $col5.text( $.trim($col5.text()) == 'Inactive' ? 'Active' : 'Inactive');
        return false;
    });
});

另外，请注意Jacob提到的关于此的更正
编辑：更新为使用$.trim而不是String.trim
您不应该使用.trim（）
，而应该使用$.trim（）
，如下所示：$.trim（$（this）.text（））
，IEThanks Nick。更新了帖子。