jquery .addClass 没有做它应该做的事情

Question

我试图使用突出显示列表元素

element.id = 'ACT_3'

$('#' + element.id).addClass('highlight');

Javascript

function selectItemId(element) {
$('#' + element.id).addClass('highlight');
var eleID = element.id;
//highlight selection(s)
selectItemId
if (document.getElementById(eleID).className == "smallfieldchecked") {
document.getElementById(eleID).className = "smallfield";
}
else {
document.getElementById(eleID).className = "smallfieldchecked";
}
Items.selectedForRemoval.length = 0;
// build a list of Selected Items    
if (elementInDocument(document.getElementById(mainGrid))) {
var ul = document.getElementById(mainGrid);
var lis = ul.childNodes;
for (var x = 0; x < lis.length; x++) {
if (document.getElementById(lis[x].id)) {
if (document.getElementById(lis[x].id).className == "smallfieldchecked") {
Items.selectedForRemoval.push(lis[x].id.replace(rowPrefix, ''));
}
}
}
}
}

CSS

.highlight {
background-color: cyan;
font-weight: bold;
}

Answer 1

我认为document.getElementById(eleID).className = "...."正在工作，但它在下面几行被addClass覆盖

尝试将if ... else行放在CCD_7块之后

Answer 2

以下是如何解决该问题的一些变体。Sélim Achour在问题的原因和如何解决问题方面是正确的。

每次执行查询时，都必须在DOM中搜索它，因此这些示例会将元素放入可重用的var.中

function selectItemIDFromMainGrid(element) {
// jquery-wrapped element
var $element = $('#' + element.id);
// actual DOM element.
var domElement = $element[0];
//highlight selection(s)
selectItemIDFromMainGrid // <-- not sure what this is
if ($element.hasClass("smallfieldchecked")) {
domElement.className = "smallfield";
}
else {
domElement.className = "smallfieldchecked";
}
// adding the class down here after setting the class above
// makes this get appended. the assignments above make a single class assignment.
$element.addClass('highlight');
// remaining code removed for brevity.
}

正如Sélim Achour所指出的，这个版本同样有效。但是，如果将来使用更多的类，则必须调试类似的情况。

function selectItemIDFromMainGrid(element) {
// jquery-wrapped element
var $element = $('#' + element.id);
// actual DOM element.
var domElement = $element[0];
//highlight selection(s)
selectItemIDFromMainGrid // <-- not sure what this is
if ($element.hasClass("smallfieldchecked")) {
domElement.className = "smallfield highlight";
}
else {
domElement.className = "smallfieldchecked highlight";
}
// remaining code removed for brevity.
}

或者，您可以跳过jQuery来添加高亮显示类。

PD_6