Как применить класс CSS к только что успешному идентификатору

Question

Я работаю над редактируемой таблицей с атрибутом HTML5 с именем contenteditable. Все работает хорошо, пока у меня нет другой идеи сообщить пользователю, какая ячейка только что обновлена. Выделите его классом из бутстрапа под названием alert-danger.

После того, как ячейка успешно отправлена. Данные отправляются обратно на родительскую страницу, сообщая result div, что это за статус. Он показывает только статус сверху таблицы, но я хотел бы добавить еще один класс в ячейку. Поэтому я добавил $("td[id="+cols3_key+"").addClass('alert-danger');, когда данные перезвонили. Ожидание последней ячейки применяется с классом опасности предупреждения. Но это не сработает. Вот мой сценарий.

Javascript

var message_status = $("#status"); 
$("td[contenteditable=true]").blur(function(){ 
    var cols3_key = $(this).attr("id") ; 
    var value = $(this).text() ; 
    $.post('inc/ajax.php' , cols3_key + "=" + value, function(data){ 
     if(data != ''){ 
      $("td[id="+cols3_key+"]").addClass('alert-danger'); 
      message_status.slideDown(); 
      message_status.text(data); 
      //hide the message 
      setTimeout(function(){message_status.slideUp()},3000); 
     } 
    }); 
}); 

Вопрос: Как я могу изменить эту строку, чтобы сослаться на ячейку, которая была просто обработана?

$("td[id="+cols3_key+"").addClass('alert-danger'); 

С уважением,

Answer 1

Попробуйте это, вам не хватает, чтобы закрыть ]

$('td[id="+cols3_key+"]').addClass('alert-danger'); 

ИЛИ

$('td[id$="cols3_key"]').addClass('alert-danger'); 

Answer 2

Вы пропускали ], чтобы вы могли использовать $("td[id="+cols3_key+"]") которые можно сделать просто: $("#"+cols3_key)

Обратите внимание на первое исправление здесь только требует дополнительных одинарные кавычки, если идентификатор содержит специальные символы:

например $("td[id='"+cols3_key+"']")

Второй показанный будет работать в любом случае.

Вместо этого я хотел бы предложить лучший способ сделать это:

1) Поместите свой АЯКС вызов функции, так что вы можете передать определенные элементы к этому, которые будут помнить за Ajax вызова.

2) Просто ссылку на элемент и перестать беспокоиться о ид

Что-то вроде этого:

var update = function($element){ 
     var value = $element.text(); 
     $.post('inc/ajax.php' , $element.attr('id') + "=" + value, function(data){ 
      if(data != ''){ 
       $element.addClass('alert-danger'); 
       message_status.slideDown(); 
       message_status.text(data); 
       //hide the message 
       setTimeout(function(){message_status.slideUp()},3000); 
      } 
     }); 
    } 

var message_status = $("#status"); 
$("td[contenteditable=true]").blur(function(){ 
    update($(this)); 
}); 

Answer 3

Вы можете просто сделать $(this).addClass('alert-danger'); вместо $("td[id="+cols3_key+"").addClass('alert-danger');

В случае, если вы не получите proper $ (this) внутри почтового обратного вызова, вы можете попробовать $("td#"+cols3_key+"").addClass('alert-danger');

В jquery для доступа к ID вы должны использовать

#. For e.g, to access <td id='test'></td> 
you will have to write $('td#test').addClass('newClass'); 

Answer 4

Наконец,

У меня есть свой выход отсюда со многими помогает от вас, ребята, и уведомление от @TrueBlueAussie. Вот полный скрипт.

HTML

<h2 class="lead text-danger">HTML5 Inline Edit</h2> 
<div id="status"></div> 
<table class="table table-bordered table-striped"> 
    <tr> 
     <td id="table_col1:1" contenteditable="true"> 
      content1 
     </td> 
     <td id="table_col1:2" contenteditable="true"> 
      content2 
     </td> 
     <td id="table_col1:3" contenteditable="true"> 
      content3 
     </td> 
    </tr> 
</table> 

CSS

#status{ 
    background:#ff0000; 
    border:solid 1px #ccc; 
    border-radius:5px; 
    color:#fff; 
    display:none; 
    padding:5px; 
    width:100%;  
} 

Javascript

$(window).load(function(){ 
     var message_status = $("#status"); 
     $("td[contenteditable=true]").blur(function(){ 
      var cols3_key = $(this).attr("id") ; 
      var value = $(this).text() ; 
      $.post('' , cols3_key + "=" + value, function(data){ 
       if(data != ''){ 
        $('td[id="'+cols3_key+'"]').addClass('alert-danger');//this is the trick. I need a couple of single quotes here to express that I need a var not an id name 

        message_status.slideDown(); 
        message_status.text(data); 
        //hide the message 
        setTimeout(function(){message_status.slideUp()},3000); 
        setTimeout(function(){$('td[id="'+cols3_key+'"]').removeClass('alert-danger')},3000); 
       } 
      }); 
     }); 
}); 

рабочая демо здесь - http://jsfiddle.net/nobuts/Lroqpk7x/9/