Динамический текст jQuery (или данные) при проблеме изменения клика


У меня есть 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 меняются местами, как предопределено). Нажатие кнопки «Активировать» изменяет текст кнопки на «Неактивировать», а текст столбца 5 — на «Активно». Кроме того, нажатие кнопки «Неактивировать» изменяет текст кнопки на «Активировать», а текст столбца 5 — на «Неактивно». Но кнопка «Деактивировать» не работает.
PHP-файл action.php здесь не актуален, потому что он ничего не печатает.

заранее спасибо

бластальфред :)


javascript jquery dynamic-data
person Alfred    schedule 01.01.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Для проблемы с неактивной кнопкой используйте обрезку с функцией text(). то есть

$(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;
    });
});

Также обратите внимание на исправление, упомянутое Джейкобом относительно ссылки на это.

РЕДАКТИРОВАТЬ: обновлено для использования $.trim вместо String.trim

person Chandu    schedule 01.01.2011
comment
Вы должны не использовать .trim(), а вместо этого $.trim(), например: $.trim($(this).text()), IE‹9 не имеет функции String.trim(), и приведенный выше ответ не будет выполнен. - person Nick Craver; 01.01.2011
comment
Спасибо, Ник. Обновил пост. - person Chandu; 01.01.2011

arrow_upward
1
arrow_downward

Вам необходимо сохранить ссылку на 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();
                 }); 
              });
          }
       }
   });
});
person Jacob Relkin    schedule 01.01.2011