-1

92個のセレクターを表示するコードがあり、各セレクターにはキャンバスがあります（セレクターからの値に応じて背景色が設定されます）。Jqueryでは、各値フォームセレクターのキャンバスに背景色を設定します。他のセレクターをクリックすると、背景色が最初のキャンバスに設定されます（最初のセレクターを形成しますが、自分のキャンバスには設定されません）。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 に答える