jquery - 如何仅更改选定的元素 css

Question

我有产品表，它按产品 ID 加载不同的 html 页面。现在我想突出显示选定的(由元素选择的)表格行。我正在使用一个函数来了解它具有的唯一 ID。

 function Tooted(str) {
        var url="tooted.php?q="+str;
        if (str == "") {
            $("#txtHint").html("");
            return;
        } else {
            $("#txtHint").load(url);
        }



    $("#tellimus"+str).on('click',function(){
        if(str!=str){

        $(this).css({'background-color':'white'})
    }
    else{$(this).css({'background-color':'#6495ED'})}
        });

    }

它像这样打开选定的 html 页面

<td>'.$r["id"].' <a id="link" nohref style="cursor:pointer;" onClick="Tooted(\''.$r["id"].'\')">Tooted</a></td>

我像这样通过唯一 ID 选择每一行:

<tr class="tellimuz" id=tellimus'.$r["id"].'>

完整的 php/html 代码:

$out .= "\n".'<tr class="tellimuz" id=tellimus'.$r["id"].'>
    <td>'.$r["id"].' <a id="link" nohref style="cursor:pointer;" onClick="Tooted(\''.$r["id"].'\')">Tooted</a></td>
    <td>'.$r["kp"].'</td>
    </tr>';

现在正如我所说，我想突出显示按功能选择的表格行。背景颜色更改有效，但我只想突出显示所选行。 Atm 每个选定的行都会更改背景颜色，并且在未选定时将其更改回白色

Answer 1

您的 javascript 中的“Tooted”函数似乎缺少右括号。

每个 anchor 标记都有相同的 ID(“链接”)。

您的代码中有 (str!=str)。您正在将一个变量与它自己进行比较，它总是等于它自己，所以在这里它总是，总是 错误

你的函数实际上在做什么:

当您单击一个链接时，它会以 HTML 格式加载到您的 #txtHint 元素中。然后，您将另一个函数绑定(bind)到整行的点击事件，这实际上会切换背景颜色。

function Tooted(str) {
  var url="tooted.php?q="+str;
  if (str == "") {
    $("#txtHint").html("");
    return;
  } else {
    $("#txtHint").load(url);
  }

  $("#tellimus"+str).on('click',function(){
    if(str!=str){
      $(this).css({'background-color':'white'})
    } else {
      $(this).css({'background-color':'#6495ED'})}
    });
  }
}

(我认为)您要做的是将一行更改为突出显示的背景色，将其余行更改为白色。您需要将其中一个更改为突出显示的颜色，将其余的更改为白色，而不是像上面那样使用单元素切换。

function Tooted(str){
  var url = "tooted.php?q="+str;
  if (str == "") {
    $("#txtHint").html("");
    return;
  } else {
    $("#txtHint").load(url);
  }

  //no need to get fancy with IDs, just get closest parent row
  $(this).closest("tr")
    //change this row to your highlight color
    .css({'background-color':'#6495ED'})
    //then get all the other rows and make them white
    .siblings("tr").css({'background-color':'white'})
}

如果我假设有误，请澄清您的问题。您呈现的 HTML 将非常有帮助。