Question

我有一个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 $button = $(this);
        $.ajax({
            type: 'POST',
            url: 'action.php',
            data: 'id='+ $(this).attr('id'),
            cache: false,
            success: function(result) {
                var $row = $button.closest('tr');
                var $col = $row.find('.clickme2');
                $row.fadeOut('fast', function() {
                    if (result == 'ACTIVATED') {
                        $button.text('Activate');
                        $col.text('Active');
                    } else if (result == 'INACTIVATED') {
                        $button.text('Inactivate');
                        $col.text('Inactive');
                    }
                }).fadeIn();
            }
        });
        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="DataB1" 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="DataC1" 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="DataD1" 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="DataE1" class="action_button" style="width:80px;height:">
                    Activate</button>
                    </td>
           </tr>
        </table>
        </td>
        </td>
        </body>
        </html>

fage包含一个包含5行的表，行的末尾有一个按钮。点击后，该按钮将数据提交到php文件，然后根据php文件的响应更改文本和模糊。 col5中的模糊功能和更改文本功能运行良好。但按钮中的更改文本功能真的很麻烦。按钮文本应相应更改。 “激活”按钮的文本应更改为“取消激活”，单击/成功提交时，“激活”按钮的文本应更改为“激活”..这不起作用..

下面是php文件代码

<?php
$id = $_POST[id];
if($id=="DataA1"){
  echo "ACTIVATED";
}
if($id=="DataB1"){
  echo "ACTIVATED";
}
if($id=="DataE1"){
  echo "ACTIVATED";
}
if($id=="DataC1"){
  echo "INACTIVATED";
}
if($id=="DataD1"){
  echo "INACTIVATED";
}
?>

提前致谢.. :)）

blasteralfred

Answer 1

我认为你的逻辑错了。当按钮最初显示“激活”时，您将返回“已激活”，因此您的按钮应显示为“取消激活”。但是，您将文本再次设置为“激活”。例如，查看ID为“DataA1”的按钮。

Answer 2

将$_POST[id]更改为$_POST["id"]。

Answer 3

我找到了解决方案..

谢谢@Heikki，@ Christy ..... :)。

我更正了以下脚本

$(function() {
    $('.action_button').click(function() {
        var $button = $(this);
        $.ajax({
            type: 'POST',
            url: 'action.php',
            data: 'id='+ $(this).attr('id'),
            cache: false,
            success: function(result) {
                var $row = $button.closest('tr');
                var $col = $row.find('.clickme2');
                $row.fadeOut('fast', function() {
                    if (result == 'ACTIVATED') {
                        $button.text('Inactivate');
                        $col.text('Active');
                    } else if (result == 'INACTIVATED') {
                        $button.text('Activate');
                        $col.text('Inactive');
                    }
                }).fadeIn();
            }
        });
        return false;
    });
});

再次感谢... :)

Answer 4

我知道你已经解决了这个问题，但无论如何这里是我的安装：

替换

data: 'id='+ $(this).attr('id'),

带

data: 'val='+ $button.html(),

并且，带有这个的php文件：

<?php
$val = $_POST['val'];
if(strstr($val,"Activate"))
  echo "ACTIVATED";
else 
  echo "INACTIVATED";
?>

Jquery更改文本ajax请求问题

4 个答案: