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

时间：2011-01-01 08:08:08

标签： 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;
    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>

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

提前致谢

blasteralfred：）

2 个答案:

答案 0 :(得分：1)

您需要在周围的this处理程序中存储对click的引用，以便能够访问在success处理程序中单击的元素： this处理程序中的success 与您的this处理程序相同click。

我喜欢称之为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();
                 }); 
              });
          }
       }
   });
});

答案 1 :(得分：0)

对于使用inactivate按钮的问题，请使用带有text（）函数的trim。即。

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

相关问题
最新问题