Javascript:如何在不使用getElementById的情况下更改子元素的获取和更改属性

Javascript: How to change get and change attributes of child elements WITHOUT using getElementById

本文关键字：情况下 元素 属性 获取 getElementById Javascript      更新时间：2023-09-26

我正在尝试使用 Javascript 更改动态生成的值列表的单击行的颜色。问题是，所有行都具有相同的"类"属性（tr.odd 或 tr.even，"偶数"或"奇数"以使行之间有一些 css 差异......），我不想使用 ID。因此，要更改单击链接的颜色，我想获取（THIS）tr元素的任何属性，并更新（添加到其中）诸如"单击"之类的值。例如，每次我在标题属性中都有一个不同的 serialNr，我可以将"单击"添加到它作为标签，它看起来像"LG 1234 单击"。我不明白..我现在正在获取所有采用此标签的 tr 元素，因此在我单击一行后，每次在另一行的"mouseleave"上，虽然没有单击，但它的颜色在单击时会更改为蓝色，我认为这个问题是由于标签"单击"添加到所有 tr 元素的"title"属性中，而不是特别需要/我单击的那个。

下面是脚本代码：

$(document).on("mouseenter", ".filter-table tbody tr", function() {
        $(this).css("background", "#21374C");
        $(this).css("color", "#DFDFDF");
    }); 
$(document).on("click", ".filter-table tbody tr", function() {
        var element = document.getElementsByTagName("tr")[0].setAttribute("title", "clicked");
        $(this).css("color", "blue");
        $(this).css("background", "#DFDFDF");
        console.log("attribute title is: " + element.getAttribute("title"));
    });
$(document).on("mouseleave", ".filter-table tbody tr.odd", function() {
        var element = document.getElementsByTagName("tr")[0];
         if (element.getAttribute("title") == "clicked") {
            $(this).css("color", "blue");
            $(this).css("background", "#DFDFDF");   
        }
        else { 
            $(this).css("background", "#DFDFDF");
            $(this).css("color", "#222222");
        }
    });
    $(document).on("mouseleave", ".filter-table tbody tr.even", function() {
        var element = document.getElementsByTagName("tr")[0];
        if (element.getAttribute("title") == "clicked") {
            $(this).css("color", "blue");
            $(this).css("background", "#DFDFDF");   
        }
        else {
            $(this).css("background", "#FFFFFF");
            $(this).css("color", "#222222");
        }
    });

HTML 的示例如下：

<tr wicket:id="content-list" class="even" style="background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); background-position: initial initial; background-repeat: initial initial;">
     <td wicket:id="cells" title="SNr: 1"><span wicket:id="cell">1</span></td>
     <td wicket:id="cells" title="DC-MAN: AGR"><span wicket:id="cell">AGR</span></td>
     <td wicket:id="cells" title="DC-FOA: SS - MH"><span wicket:id="cell">SS - MH</span></td>
     <td wicket:id="cells" title="DC-SC: ABCDEFGH"><span wicket:id="cell">ABCDEFGH</span></td>
</tr>
<tr wicket:id="content-list" class="odd" style="background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); background-position: initial initial; background-repeat: initial initial;">
     <td wicket:id="cells" title="SNr: 2"><span wicket:id="cell">2</span></td>
     <td wicket:id="cells" title="DC-MAN: PPT"><span wicket:id="cell">PPT</span></td>
     <td wicket:id="cells" title="DC-FOA: DB - OP"><span wicket:id="cell">DB - OP</span></td>
     <td wicket:id="cells" title="DC-SC: MNBVCXY"><span wicket:id="cell">MNBVCXY</span></td>
</tr>
<tr wicket:id="content-list" class="even" style="background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); background-position: initial initial; background-repeat: initial initial;">
     <td wicket:id="cells" title="SNr: 3"><span wicket:id="cell">3</span></td>
     <td wicket:id="cells" title="DC-MAN: QWE"><span wicket:id="cell">QWE</span></td>
     <td wicket:id="cells" title="DC-FOA: AS - HG"><span wicket:id="cell">AS - HG</span></td>
     <td wicket:id="cells" title="DC-SC: LKJHGF"><span wicket:id="cell">LKJHGF</span></td>
</tr>

你已经在起诉JQuery选择器了，为什么不在这里使用它呢？

例如：

 var element = $("#idName")[0].setAttribute("title", "clicked");

或

var element = $(".className")[0].setAttribute("title", "clicked");

来自保罗克的BR

您应该删除内联样式并改为分配类。

$('td').click(function(){
   $(this).parent().removeClass('hover').addClass('click'); 
}).mouseenter(function(){
    $(this).parent().addClass('hover');
}).mouseleave(function(){
    $(this).parent().removeClass('hover click');
});

演示

当然，我还没有浏览您的整个代码。您将需要修改要在 css 中应用的其他更改，我只是向您展示方法。祝你好运！

相关文章：