-1

我的代码显示 92 个选择器，每个选择器都有一个画布（根据选择器中的值设置背景颜色），在 Jquery 中，我为每个值表单选择器设置背景颜色到画布，我的问题是当我单击其他选择器它将背景颜色设置为第一个 Canvas（形成第一个选择器，但不在他自己的 Canvas 上），我有 92 个选择器，每个都有 CANVAS，我怎么能在 JQUERY 中做到这一点...

代码

 <html>
   <head>
    <title>Tests</title>
    <style type="text/css">
     .table-container {
     display: inline-table;
     }
   table {
    width: 230px;
   }
  </style>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">      
 $(document).ready(function(){
  $('select').change(function() {
   var selected = $(this).find(':selected').val();
    if (selected == 'Forms') {
     $('#myCanvas').css('background','green');
    }
      if (selected == 'language Syntax') {
     $('#myCanvas').css('background','yellow');
     }
      if (selected == 'Fundamentals') {
     $('#myCanvas').css('background','red');
     }
      if (selected == 'Advanced Concepts') {
     $('#myCanvas').css('background','blue');
     }
      if (selected == 'New Concepts in PHP5') {
     $('#myCanvas').css('background','violet');
     } 
     if (selected == 'Operators and Functions') {
     $('#myCanvas').css('background','black');
     } 
     if (selected == 'Variables and Datatypes') {
     $('#myCanvas').css('background','brown');
     } 
     });
  });
   </script>
     </head>
    <body>
   <h3>Tests</h3>
  <div class="table-container">
 <table border="3">      
   <tr>
       <th>
 <?php
  $con = mysql_connect("localhost","root","sergios.com");
 if (!$con)
 {
 die('Could not connect: ' . mysql_error());
  }

 mysql_select_db("phptests", $con);


$result1 = mysql_query("SELECT * FROM question");

for($i=1;$i<93;++$i)
 { 
  $result = mysql_query("SELECT * FROM Category"); 
 echo "Number:".$i."<br />";
 echo "<select>";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
{
  echo "<option>" .  $line['name'] . "</option>";
}
echo "</select>"; 
?>
 <canvas id="myCanvas" width="20" height="20" style="border:1px solid #c3c3c3;">
   </canvas>
4

1 回答 1

0

根据我的观察，您正在更改同一画布元素的颜色（id="myCanvas" => '#myCanvas'）。因此，您需要一种将每个唯一选择器与每个唯一画布唯一关联的方法。

有更优雅的方式来重新编码您已编码的内容。由于时间关系，这里是一个利用html元素类名的例子。

// in php //////////
<?php
for($i=1;$i<93;++$i){ 
    $result = mysql_query("SELECT * FROM Category"); 
?>
    <br />
    Number: <?php echo $i; ?>
    <select class="<?php echo 'myCanvas_' . $i; ?>">
    <?php
    while($line = mysql_fetch_assoc($result)){
    ?>
        <option value="<?php echo $line['name']; ?>"><?php echo $line['name']; ?></option>
    <?php
    }
    ?>
    </select>
    <canvas id="<?php echo 'myCanvas_' . $i; ?>" width="20" height="20" style="border:1px solid #c3c3c3;"></canvas>
<?php
}
?>


$(document).ready(function(){
    $('select').change(function() {

        var toChangeCanvasId = '#' + $(this).attr('class');
        var selected = $(this).find(':selected').val();
        if (selected == 'Forms') {
            $(toChangeCanvasId).css('background','green');
        }
        if (selected == 'Fundamentals') {
            $(toChangeCanvasId).css('background','red');
        }

    });
});​
于 2012-10-25T09:28:07.700 回答