如何將CSS類應用於剛剛成功的ID

Question

我正在使用名爲contenteditable的HTML5屬性編輯可編輯表格。一切都很好，直到我有另一個告訴用戶剛剛更新的單元的想法。通過一個名爲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'); 

OR

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

Answer 2

你是缺少一個]，所以你可以使用$("td[id="+cols3_key+"]")這可以簡單地做成：$("#"+cols3_key)

注意的首次定位在這裏只需要額外的單引號如果ID中包含特殊字符：

例如$("td[id='"+cols3_key+"']")

第二個顯示將在任何情況下工作。

相反，我建議這樣做的更好的辦法：

1）把一個函數的Ajax調用，所以你可以通過特定的元素，這將在每一個Ajax調用被記住。

2）只是參考的元素，並停止擔心ID

事情是這樣的：

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');

如果你沒有得到正確的$（這個）回撥裏面，你可以試試$("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/