0

次のような単純なコードを使用して、Javascript を使用して項目の CSS ID を変更できます。

<div id="teststyle1">Test Text, 1-1</div>

<button type="button" onclick="document.getElementById('teststyle1').style.color='red'"> Test 1 </button>

ただし、同じ ID で 2 行目のテキスト (以下の完全な例のように) を追加しようとすると、そのうちの 1 つだけが変更されます。両方の項目が変更されるこの問題に対する簡単な修正はありますか?

例：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#teststyle1{
text-decoration: underline;
}
</style>
</head>
<body>

<div id="teststyle1">Test Text, 1-1</div>
<div id="teststyle1">Test Text, 1-2</div>

<button type="button" onclick="document.getElementById('teststyle1').style.color='red'">Test 1</button>

</body>
</html>

どんな助けでも大歓迎です！

4

3 に答える 3

2

ID は一意である必要があります。代わりにクラスを使用します。

<div class="teststyle1">Test Text, 1-1</div>
<div class="teststyle1">Test Text, 1-2</div>

<button type="button" onclick="Array.prototype.forEach.call(document.getElementsByClassName('teststyle1'), function(element) { element.style.color='red'; })"> Test 1 </button>

読みやすさと優れたスタイルのために、次のことをお勧めします。

<div class="teststyle1">Test Text, 1-1</div>
<div class="teststyle1">Test Text, 1-2</div>

<button id="my_button" type="button"> Test 1 </button>
<script>
    document.getElementById('my_button').onclick = function() {
        Array.prototype.forEach(document.getElementsByClassName('teststyle1'), function(element) {
            element.style.color='red';
        });
    };
</script>
于 2013-11-03T08:57:26.170 に答える
0

id は一意です。クラスに移動する場合は、常に最初の一致が適用されます

<div class="class1">Test Text, 1-1</div>
<div class="class1">Test Text, 1-2</div>

jqueryでは、インデックスに基づいてアクセスできます

$('.class1:eq(0)').html();
$('.class1:eq(1)').html();
于 2013-11-03T09:09:57.150 に答える
0

異なる要素で id を使用しないでください。クラスを使用してみると、javascript はクラスの下のすべての要素を変更します

于 2013-11-03T09:04:02.477 に答える