Question

是jquery的新手。我在div里面有一些颜色。如果我点击任何一种颜色它应该影响另一个div的背景颜色。我从数据库中获取这些颜色。如何制作？

前：

<?php
  $result = dbclass::convert_array($res);// retrieving colors here
  for($i = 0; $i < $rows; $i++)
  { ?>
   <div id="Color" style="background-color:<?php echo $result[$i][1];?>; width:32px;  height:26px;" onclick="changeColor(<?=$result[$i][1];?>)">
  </div>
  <? 
  }
  ?>

  <div id="changableColor" style"background-color:#FFFFFF;"> </div>

function changeColor(newColor)
{
   $(#changableColor) // then how to write?
}

我需要更改“id = changableColor”的背景颜色。它有白色背景颜色吗？

感谢。

Answer 1

您的代码的前6行非常难以阅读，因此我重写了它们。您混合了<?php和<?这不是一个好习惯，而for loop和HTML之间切换时应该使用的PHP样式已被更改也是。不过，很多都是偏好，所以请随意反对或改变它。

<?
$result = dbclass::convert_array($res);
$rows = count($result);

for ($i = 0; $i < $rows; $i++) :
?>

<div id="Color" 
style="background-color:<? echo $result[$i][1];?>; width:32px; height:26px;" 
onclick="changeColor(<? echo $result[$i][1]; ?>)">
</div>

<? 
endfor;
?> 

function changeColor(newColor) {
    $('#changableColor').css('background-color', '#' + newColor);
}

Answer 2

$("#changableColor").css("background","#fff");

HERE就是一个例子

Answer 3

$("#changableColor").css("backgroundColor","#colorCode");

Answer 4

您的代码中存在大量问题。首先，在你的for循环中你使用ID而不是类，你应该只使用一次ID。其次，有更好的方法来附加这个。请接受下面和未经测试的示例，它应该可以工作，但需要进行一些测试。

<?php
    $result = dbclass::convert_array($res); //retrieving colors here
    for($i = 0; $i < $rows; $i++) {
?>

<!--  Using class .color instead of ID -->
<div class="color" style="background-color:<?php echo $result[$i][1];?>; width:32px;  height:26px;">
</div>

<? } ?>

<div id="changableColor" style"background-color:#FFFFFF;"> </div>

<script type="text/javascript">
    $(document).ready(function(){
            // Attaching using a jQuery click function
        $(".color").click(function(){
                    // Using this operator to grab the background-color of the clicked item
            $(#changableColor).css("background-color",$(this).css("background-color"))
        });
    });
</script>

如果您需要进一步的帮助，请发表评论。

使用jquery单击另一个div时如何更改div颜色？

4 个答案: