使用php包含多个javascript代码

我想使用php（include）在同一页面中多次包含此代码。
html代码：

<div class="red" onclick="red()">red</div>
<div class="green" onclick="green()">green</div>
<div class="blue" onclick="blue()">blue</div>
<div id="change">click on the colors to change the div color</div>

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
#change{background-color: yellow;width: 100px;}

function red()
{
document.getElementById('change').style.background="red";
}
function green()
{
document.getElementById('change').style.background="green";
}
function blue()
{
document.getElementById('change').style.background="blue";
}

javascript代码：

<div class="red" onclick="red()">red</div>
<div class="green" onclick="green()">green</div>
<div class="blue" onclick="blue()">blue</div>
<div id="change">click on the colors to change the div color</div>

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
#change{background-color: yellow;width: 100px;}

function red()
{
document.getElementById('change').style.background="red";
}
function green()
{
document.getElementById('change').style.background="green";
}
function blue()
{
document.getElementById('change').style.background="blue";
}

这段代码在第一个div（id=change）中运行良好，但在第二个div中，当我单击class=red的div时，它会更改第一个div而不是第二个div。
如何使其更改其下方的div？
问题已解决：

---

我已经编写了一些代码，可以为您完成这项工作：

PHP

for($i=0; $i<10; $i++) {
    echo '<div id="containter_'.$i.'">';
    echo '<div class="red" onclick="color(\'red\', this);" id="red_'.$i.'">red</div>';
    echo '<div class="green" id="green_'.$i.'" onclick="color(\'green\', this)">green</div>';
    echo '<div class="blue" id="blue_'.$i.'" onclick="color(\'blue\', this)">blue</div>';
    echo '<div class="change" id="change_'.$i.'"></div>';
    echo '</div>';
}

CSS

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
.change{background-color: yellow;width: 100px;}

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
.change{background-color: yellow;width: 100px;}

$(function() {
    var colors = ["red", "green", "blue"];
    $.each(colors, function() {
        var color = this;
        $("." + color).click(function() {
            $(this).siblings(".change").css("background", color)
        });
    });
});

希望这有帮助。

试试这个

HTML

<div>
    <div class="red">red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
    <div class="change">click on the colors to change the div color</div>
</div>
<div>
    <div class="red">red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
    <div class="change">click on the colors to change the div color</div>
</div>

JS

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
.change{background-color: yellow;width: 100px;}

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
.change{background-color: yellow;width: 100px;}

$(function() {
    var colors = ["red", "green", "blue"];
    $.each(colors, function() {
        var color = this;
        $("." + color).click(function() {
            $(this).siblings(".change").css("background", color)
        });
    });
});

---

不能定义具有相同

id

属性的多个元素。对于浏览器在这种情况下应该做什么，结果是未定义的，但正如您所看到的，它通常使用在HTML文档中找到的第一个结果。这些代码的用途是什么？您可以将一个div id分配给一个div。否则JS如何确定它更改了哪个div的颜色？@MarcBaumbach如何使它使用与它最近的div？我尝试过getElmentByTagName（'div'）[3]，但它仍然使用索引为（3）的div。@AthulAK我想在论坛中使用类似的代码，允许用户在帖子中多次包含它。实现这一点的方法有很多，一种是提供一个唯一的ID，并将其传递到正在调用的函数中（请参见此）。不过，我通常会推荐更多。复制粘贴@MarcBaumbach在上面评论中给出的代码有什么意义？这将帮助其他用户使用答案。用户从不寻找评论，而是寻找答案。