0

私はこのコードを持っています:

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
    if($i++%2==0){
       $color="#FFFFFF";
    }else{
       $color="#CCCCCC";
    }

    ?>

    <tr bgcolor='<?php echo $color; ?>' onmouseover="this.style.background='#ABFB04';" onmouseout="this.style.background='<?php echo $color; ?>';">
    <?php

echo "<td class=tablelist>";

echo $row["ICAO"] . '</td><td class=tablelist>';

echo $row["Name"] . '</td><td class=tablelist>';

echo $row["WeightEmpty"] . '</td><td class=tablelist>';

echo $row["WeightFull"] . '</td><td class=tablelist>';

echo $row["CargoFull"] . '</td><td class=tablelist>';

echo $row["Range"] . '</td><td class=tablelist>';

echo $row["Price"] . '</td><td class=tablelist>';

echo $row["FirstClassSeats"] . '</td><td class=tablelist>';

echo $row["BusinessClassSeats"] . '</td><td class=tablelist>';

echo $row["EconomyClassSeats"]. '</td><td class=tablelist>';

echo "<img id='editaircraft' src='./images/info.png'></td></tr>"; 

?>
<script>
    $(function() {
        $( "#editaircraftdialog" ).dialog({
            autoOpen: false,
            width: 425
        });

        $( "#editaircraft" ).click(function() {
            $( "#editaircraftdialog" ).dialog( "open" );
            return false;
        });
    }); 
</script>

<div id="editaircraftdialog" title="Edit Aircraft">
    <p>Hello World!!</p>
</div>

<?php
}

echo "</table>";
$pagination->render();
?>

PHP テーブルの行の内容です。テーブルの行のいずれかで画像 info.png をクリックすると、JQuery ダイアログ「editaircraftdialog」が表示されます。

このコードで。最初の行の画像をクリックしたときにのみダイアログが表示されます。1行目ではない2番目またはその他をクリックすると、ダイアログが表示されません。

4

3 に答える 3

1

これを試して

<?php
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
    if($i++%2==0){
       $color="#FFFFFF";
    }else{
       $color="#CCCCCC";
    }

    ?>

    <tr bgcolor='<?php echo $color; ?>' onmouseover="this.style.background='#ABFB04';" onmouseout="this.style.background='<?php echo $color; ?>';">
    <?php

echo "<td class=tablelist>";

echo $row["ICAO"] . '</td><td class=tablelist>';

echo $row["Name"] . '</td><td class=tablelist>';

echo $row["WeightEmpty"] . '</td><td class=tablelist>';

echo $row["WeightFull"] . '</td><td class=tablelist>';

echo $row["CargoFull"] . '</td><td class=tablelist>';

echo $row["Range"] . '</td><td class=tablelist>';

echo $row["Price"] . '</td><td class=tablelist>';

echo $row["FirstClassSeats"] . '</td><td class=tablelist>';

echo $row["BusinessClassSeats"] . '</td><td class=tablelist>';

echo $row["EconomyClassSeats"]. '</td><td class=tablelist>';

echo "<img id='editaircraft".$i."' src='./images/info.png'></td></tr>"; 

?>
<script>
       $( "#editaircraft<?php echo $i; ?>" ).click(function() {
            $( "#editaircraftdialog" ).dialog( "open" );
            return false;
        });
</script>
<?php
}

?>

<script>
    $(function() {
        $( "#editaircraftdialog" ).dialog({
            autoOpen: false,
            width: 425
        });


    }); 
</script>

<div id="editaircraftdialog" title="Edit Aircraft">
    <p>Hello World!!</p>
</div>

<?php
echo "</table>";
$pagination->render();
?>
于 2013-01-07T17:09:10.073 に答える
1

問題は、ID は常に一意であると vimalnath が述べたように、HTML 要素 ID が重複している可能性があります。2 つ (またはそれ以上) の行がある場合、同じ ID を持つ 2 つの要素になるため、使用される jQuery セレクターは最初の要素のみを選択します。

次のように、ID をクラスに置き換えます。

echo "<img class='editaircraft' src='./images/info.png'></td></tr>";

jQuery セレクターは次のようになります。

 $( ".editaircraft" ).click(function() {

http://validator.w3.org/などの HTML バリデーターを使用することを常にお勧めします。ID の重複は、バリデーターによってエラーと見なされます。

于 2013-01-07T17:02:22.967 に答える
0

classの代わりに使用する必要がありますid。 Idは CSS で常に一意です。

W3C では、クラス ID を「要素の一意の識別子」と定義しています。クラスは複数回使用できますが、ID は 1 回しか使用できないため、頻繁に使用することがわかっているアイテムにはクラスを使用する必要があります。たとえば、Web ページのすべての段落に同じスタイルを適用する場合は、クラスを使用します。

于 2013-01-07T16:58:29.393 に答える