12

一致するクラスを持つリンクとテーブル行があります。リンクをクリックすると、同じクラスの行の背景色を変更したいのですが。いずれの場合も、同じクラスの行は1つだけになります。

これが私の現在の機能です。

   <script type="text/javascript">

function check(x) {
    elements = document.getElementsByClassName(x);
    for (var i = 0; i < elements.length; i++) {
        elements[i].bgColor="blue";
    }
}
</script>

テーブル行スクリプトの一部を次に示します。

<tr class="alt1 12">
<td width="50" height="55">
<img src="iPhone/statusicon/12.png" alt="" id="forum_statusicon_12" border="0"></td>
<td>
<div class="forumtitle">
<a class="forumtitle 12" href="forumdisplay.php?f=12" action="async" onclick="check(this.className.split(' ')[1])">News and Current Events</a></div>
</td>
<td width="25">
<div class="forumarrow"><img src="iPhone/chevron.png" alt="" border="0"></div>
</td>
</tr>

テーブルの行には2つのクラスがあり、2番目のクラス（番号）がアドレス指定されるものである必要があります。現在のコードでは、「無効または不正な文字列が指定されました」というエラーが表示されます

4

4 に答える 4

15

いくつかのエラーがあります。クラスとIDを混在させましたが、classプロパティは実際にはclassName

<script type="text/javascript">

function check(x) {
    elements = document.getElementsByClassName(x);
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="blue";
    }
}

</script>

<a href="#" class="first" onclick="check(this.className)">change first row</a>
<a href="#" class="second" onclick="check(this.className)">change second</a>
<!--        FIX ( id -> class )                FIX ( class -> className ) -->
<table>
<tr class="first">
<td>test1</td>
</tr>


<tr class="second">
<!--FIX ( id -> class ) -->
<td>test2</td>
</tr>
</table>

このjsfiddleを確認してください

于 2013-01-13T19:27:41.217 に答える
6

querySelectorAll（）を使用すると、jQueryを使用せずに簡単に実行することもできます。

<script type="text/javascript">

function check(selector)
{
    var elements = document.querySelectorAll(selector);
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "blue";
    }
}
</script>

<a href="#" class="first" onclick="check('.' + this.className)">change first row</a>
<a href="#" id="second" onclick="check('#' + this.id)">change second</a>

<table>
<tr class="first">
    <td>test1</td>
</tr>


<tr id="second">
    <td>test2</td>
</tr>
于 2013-01-13T19:26:42.503 に答える
4

jQueryはそれを単純化します：

$(".button").click(function(){
 var class = $(this).attr("data-class");
 var color = $(this).attr("data-color");
 $("."+class).css("background-color",color);
});

.buttonボタンに適用するクラスdata-classであり、背景色を変更したいクラスに追加し、変更しdata-colorたい色です。

于 2013-01-13T19:21:22.013 に答える
0

同じ問題がありました。純粋なjs（ダークテーマ）のすべての要素の背景を変更する必要があります。奇妙なエラーのページにjQueryを追加できませんでした（このドキュメントには「TrustedHTML」の割り当てが必要です）

elements = document.querySelectorAll("*");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor="#777";
    elements[i].style.color="#ddd";
}
于 2021-12-16T03:31:44.270 に答える