jQuery динамический текст (или данные) при изменении клика - PullRequest
Новая
       4

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

0 голосов
/ 01 января 2011


У меня есть 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 здесь не имеет значения, поскольку он ничего не печатает.

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

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

Ответы [ 2 ]

1 голос
/ 01 января 2011

Вам необходимо сохранить ссылку на 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();
                 }); 
              });
          }
       }
   });
});
0 голосов
/ 01 января 2011

Для проблемы с кнопкой деактивации используйте обрезку с функцией 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

...