2

quest_row、quest_image、および quest_text の 3 つの行のグループを含むテーブルがあります。最初は、quest_row のみが表示されます - これは機能します。問題番号を表示します。ユーザーがテーブルの quest_row 行をクリックすると、次の quest_image と quest_text 行が表示されるようにします。コードは次のとおりです。

<table width="90%">
<tr>
    <td>Questions <?php echo "how many = $how_many"; ?>
    </td>
</tr>
</table>
<?php 
for ($i=1;$i<=$how_many;$i++) {
$row=mysqli_fetch_assoc($result);?>
<table name="quest_info" id="quest_info" border=1 width="100%">
    <tr class="quest_row">
        <td bgcolor="#00CCFF">
        Question# <?php echo $i; ?>
        </td>
    </tr>
<?php if ($row["image"] <> NULL) { ?>
        <tr class="quest_image" >
            <td class="quest_image" id="quest_image<?php echo $i; ?>">
                <img src="<?php $pic = $row['image']; echo $base_path . $pic; ?>" width="200" />
            </td>
        </tr>
        <tr class="quest_text" >
            <td class="quest_text" id="quest_text<?php echo $i; ?>"><?php echo $row["question"]; ?></td>
        </tr>
    </table>
    <?php
} else {
    ?>
        <tr class="quest_image" >
            <td class="quest_image" id="quest_image<?php echo $i; ?>">
            </td>
        </tr>
        <tr class="quest_text" >
            <td class="quest_text" id="quest_text<?php echo $i; ?>"><?php echo $row["question"]; ?></td>
        </tr>
    </table>
    <?php 
} ?>
<?php
}  ?>
<script type="text/javascript" src="../jquery/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".quest_text").hide();
$(".quest_image").hide();
$("#quest_info").click(function(){
    var trigger = event.target;
    alert('target = ' + target);
    if(trigger.className == 'quest_row') 
    {
            $(trigger).closest('tr').next('quest_image').show();
            $(trigger).closest('tr').next('quest_text').show();
    }
    });
});
</script>

なぜこれが機能しないのかわかりません。

4

1 に答える 1

0

テーブルの行を表示/非表示にするときに JQuery に問題があります。DIV を使用してみてください

于 2012-08-04T11:11:02.717 に答える