如何使用 Javascript 控制克隆 <div> 的 css？答案

【问题标题】：How can I control the css of cloned <div> with Javascript?如何使用 Javascript 控制克隆 <div> 的 css？
【发布时间】：2014-12-11 04:55:06
【问题描述】：

我正在使用滑块来控制正方形的背景颜色。为了动态操作样式表，我使用的是 JQuery 函数

.css()

然后我复制这个正方形几次

square.clone().insertAfter('#square');

到目前为止，我有三个正方形，它们都受 .css() 函数的影响（见上文）。但是当我移动一个滑块来改变方块的颜色时，只有第一个方块会受到影响。但是，每个方块都应该改变颜色。

我该怎么做？

见http://jsfiddle.net/0971yehk/

【问题讨论】：

标签： javascript jquery css duplicates clone

【解决方案1】：

见http://jsfiddle.net/0971yehk/5/

你需要在原来的div上设置class，然后改变handler来改变class的颜色，而不是具体的div。克隆不会克隆 id。

<div id="square" class="square" ></div>

$(".square").css("background-color",....

【讨论】：

谢谢。与上面的解决方案几乎相似，但编辑速度更快
@wurstbrotrest 不用担心。只要记住接受任何一个答案。

【解决方案2】：

对重复的元素使用 class 而不是“id”值。 “id”值必须是唯一的，如果您要克隆元素，显然情况并非如此。

<div class="square" ></div>

对于 HTML 和

// Color-Slider

$( "#red_slider, #green_slider, #blue_slider" ).slider(
{
    orientation: "horizontal",
    range: "min",
    max: 255,
    slide: changeColor,
    change: changeColor
});

// Slider Setup: Green

$( "#red_slider" ).slider( "value", 0 );
$( "#green_slider" ).slider( "value", 255 );
$( "#blue_slider" ).slider( "value", 0 );

function changeColor() 
{
    red_slider = $( "#red_slider" ).slider( "value" ),
    green_slider = $( "#green_slider" ).slider( "value" ),
    blue_slider = $( "#blue_slider" ).slider( "value" );

    // CSS Manipulation

    $(".square").css("background-color", "rgba(" + red_slider + "," + green_slider + "," + blue_slider + ")"); 
}

// dublicate squares

var square = $('.square');

for(var i = 1; i <= 2; i++)
{
    square.clone().insertAfter(square);
}

对于 JavaScript 和

.square
{
    width: 100px; height: 100px;
    background-color: rgb(255, 0, 0); /*red*/
    margin: 10px; float: left;
}

对于 CSS。 Forked fixed fiddle.

【讨论】：

谢谢。这很有帮助。只需将正方形的 id 替换为 Class 即可！