如何在while循环中使用hide show与不同的id

时间:2016-05-21 06:17:41

标签: javascript php jquery html

HTML

while($row=mysql_fetch_array($result_pag_data)) {
    $ad++;
    $sql1=mysql_query("select *from company where com_id='$row[com_id]'");
    $row1=mysql_fetch_array($sql1);

?>
    <tr>
    <input type="hidden" id="comid" name="comid" value="<?php echo $row1[com_id];?>"/>
    <tr>
        <td><img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile"></td>
        <td class="comm-details"><strong>Mobile</strong></td>
        <td align="center">:</td>
        <td class="comm-details"><?php if($row1['mobile1']!='') { ?> <a id="showmobile<?php echo $row1[com_id];?>">View Mobile Number</a> <span id="shwmb<?php echo $row1[com_id];?>" style="display:none"><?php echo $row1['mobile1'];}else{ echo 'Not Available';}?></td>
    </tr>
}

的Javascript

<script>
$(function () {
    var comid = $('#comid').val();
    $("#showmobile" + comid).click(function() {
        $("#shwmb" + comid).show();
        $("#shwmb" + comid).hide();
    });
});
</script>

现在,我想在客户点击View Mobile Number时显示手机号码。它目前仅适用于首次浏览的公司,而不适用于后续公司。

当我更改事件处理以收听课程而不是ID时,点击任何一家公司的View Mobile Number将显示页面上所有公司的手机号码。

两种解决方案都没有正常工作。我做错了什么,我该如何做到这一点?

3 个答案:

答案 0 :(得分:0)

您必须在行的ID或CLASS中添加唯一值。

<input type="hidden" id="comid<?php echo $row['ID']?>" name="comid" value="<?php echo $row1[com_id];?>"/>

然后在javascript代码中,您只需指定id以及id_name和id_value。

答案 1 :(得分:0)

更改您的代码,如下所示:

<?php
$ad = 0;
while ($row = mysql_fetch_array($result_pag_data)) {
    $ad++;
    $sql1 = mysql_query("select *from company where com_id='$row[com_id]'");
    $row1 = mysql_fetch_array($sql1);
    ?>
    <tr>
    <input type="hidden" id="comid" name="comid" value="<?php echo $row1[com_id]; ?>"/>
    <tr>
        <td><img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile"></td>
        <td class="comm-details"><strong>Mobile</strong></td>
        <td align="center">:</td>
        <td class="comm-details">
            <?php if ($row1['mobile1'] != '') { ?> 
            <a id="showmobile<?php echo $row1[com_id]; ?>" onclick="return showmobile(<?php echo $row1[com_id]; ?>)">View Mobile Number</a> 
                <span id="shwmb<?php echo $row1[com_id]; ?>" style="display:none">
                    <?php echo $row1['mobile1']; ?>
                </span>
            <?php
            } else {
                echo 'Not Available';
            }
            ?>
        </td>
    </tr>
    <?php }
?>

<script>
    function showmobile(id) {
        if($("#shwmb" + id).css('display') == 'none') {
            $("#shwmb" + id).show();
        }else {
            $("#shwmb" + id).hide();
        }
    }
</script>

答案 2 :(得分:0)

这可能适用于您的目的:

while($row=mysql_fetch_array($result_page_data)) {
    $ad++;
    $sql1=mysql_query("select *from company where com_id='$row[com_id]'");
    $row1=mysql_fetch_array($sql1);

?>

    <tr>
        <td>
            <input type="hidden" id="input-<?php echo $row1[com_id];?>" name="input-<?php echo $row1[com_id];?>" value="<?php echo $row1[com_id];?>"/>
            <img src="images/mobile.png" width="18" height="18" border="0" alt="Mobile">
        </td>
        <td class="comm-details"><strong>Mobile</strong></td>
        <td align="center">:</td>
        <td class="comm-details"><?php if($row1['mobile1']!='') { ?> <a id="showmobile<?php echo $row1[com_id];?>" class="showmobile">View Mobile Number</a> <span id="shwmb<?php echo $row1[com_id];?>" style="display:none"><?php echo $row1['mobile1'];}else{ echo 'Not Available';}?></td>
    </tr>
}

<script>
$(function () {
    $(".showmobile").click(function() {
        var comid = $(this).attr("id").replace("showmobile","");
        $("#shwmb" + comid).toggle();
    });
});
</script>

第一个更改是在隐藏输入字段的$row1[com_id]id属性中使用name。这将允许隐藏字段彼此分离,因为id必须在页面上是唯一的; name也应该是唯一的。

接下来,在showmobile链接中添加了一个类,以便我们可以安装单个类级别的单击处理程序。点击处理程序将从com_id元素中提取showmobile,并使用它来更改shwmb元素的可见性,使用jQuery toggle

已进行了一些轻微的重组,并进行了一些重要的重新格式化。隐藏的输入字段已添加到第一个td元素中,因此它不会干扰表的结构。

此外,$result_page_data变量名称已更正。