改进jquery函数,因此不必重复

时间:2016-02-22 18:04:52

标签: php jquery function

我有许多HTML选择框,它们是由PHP中的do-while循环创建的。通常,框的数量从1到大约6不等。然后我有一行复选框以相同的方式创建。选择框提供数字选择,例如0到5.如果选择的值为1或更多的选择框,我想隐藏相应的复选框。

实际页面超过500行,因此很难看到树木。出于测试目的,我创建了一个极简主义文件来玩。我目前的代码是:

<?php
// Loop through the rooms
$i=1;
do {
    $roomtype = $row_room['roomtype'];
    $room_id = $row_room['room_id'];
    $roomnumber = $row_room['number'];

    $selectroom = "<div><br>
<br>
ID ".$room_id."&nbsp;&nbsp;&nbsp;<select id=\"s".$room_id."\" name=\"numrooms[".$room_id."]\">";
    $selectroom .= "<option value=\"\" selected>Select</option>";
    $k=1;
    if ($roomnumber ==NULL||$roomnumber ==0||$roomnumber >5) {$roomnumber = 5;};
    while ($k<=$roomnumber) {
        $selectroom .= "<option value=\"".$k."\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".$k."</option>";
        $k++;
    }
    $selectroom .= "</select></div>";

    echo $selectroom;

?>
<script>
$('#s<?php echo $room_id ?>').change(function(){
    if($(this).val()>0){
        $('#<?php echo $room_id ?>').css('display', 'none');
    }else{
        $('#<?php echo $room_id ?>').css('display', 'inline-block');
    }
});
</script>
<?php } while ($row_room = mysql_fetch_assoc($room));
?>

<br>
<br>
<?php // Alternative room choice
mysql_data_seek($room,0);
while ($row_room = mysql_fetch_assoc($room)) { ?>
<label id="<?php echo $row_room['room_id'] ?>" style="display:inline-block"><input name="altroom[]" type="checkbox" value="<?php echo $row_room['roomtype'] ?>">
<?php echo "Item with ID ".$row_room['room_id']." &nbsp;&nbsp; "; ?></label>
<?php }?>

正如您所看到的,执行隐藏的jQuery脚本放在do-while循环中,因此会重复多次(值的变化)。在我看来,这是一个非常粗糙和不优雅的解决方案。我想将脚本移到php之外,只需要一次。我怎样才能做到这一点?

编辑:破解了!

我补充说:

onchange=\"dropAlternative(".$room_id.")\"

到HTML选择并将Javascript移动到页面正文的末尾。

然后脚本变成了:

function dropAlternative(roomID) {
    if($('#s' + roomID).val()>0){
        $('#' + roomID).css('display', 'none');
    }else{
        $('#' + roomID).css('display', 'inline-block');
    }
}

对于这里的Javascript专家来说,这可能完全不起眼,但作为一个Javascript numpty,我对自己感到非常满意。

0 个答案:

没有答案