<Script> 功能在减小屏幕尺寸时不起作用答案

【问题标题】：<Script> functions not working when reducing screen size<Script> 功能在减小屏幕尺寸时不起作用
【发布时间】：2018-06-23 13:42:48
【问题描述】：

我在过去几个月开发的预订模块有问题。可以到以下地址查看：

Taxi milan

除了一个问题外，一切都运行良好。当我减小浏览器窗口的大小时，我决定让图像消失，只留下预订模块。当它被调整大小时，它停止工作：所有脚本功能（根据出发选择和“获取价格”按钮提供到达的功能）都不起作用。你能告诉我是什么导致了这个问题吗？

您可以在下面找到您可能会发现问题的代码的主要部分。

主页

<body>
<?php
    $explode = explode('/', $_SERVER['REQUEST_URI']);
    if($explode[1] == 'it' and $explode[2] == 'ros-ncc'){
?>
<div id="image">
    <div id="modulemax">
    <?php
    require('wp-content/themes/customizr/prenota/index.php');
?>
    </div>
</div>
<?php
   }else if($explode[1] == '' and $explode[2] == ''){
?>
<div id="image">
    <div id="modulemax">
<?php    
require('wp-content/themes/customizr/book/index.php');
?>
    </div>
</div>
<?php    
} else {
    }
    ?>
<div id="modulemin">
    <?php
    $explode = explode('/', $_SERVER['REQUEST_URI']);
    if($explode[1] == 'it' and $explode[2] == 'ros-ncc'){
         require('wp-content/themes/customizr/prenota/index.php');
    }else if($explode[1] == '' and $explode[2] == ''){
        require('wp-content/themes/customizr/book/index.php');
    } else {
}
?>
</div>
</body>

INDEX - BOOK（英文预订模块）

<?php include "prova1.php"; ?>
<script>
function getArrival(val) {
    $.ajax({
    type: "POST",
    url: "wp-content/themes/customizr/book/process.php",
    data:'dep_name='+val,
    success: function(data){
        $("#arrivals-list").html(data);
    }
    });
}
</script>
<script>
function chk(){
    var var1=document.getElementById('departures-list').value;
    var var2=document.getElementById('arrivals-list').value;
    var var3=document.getElementById('passengers').value;
    var var4=document.getElementById('bags').value;
    var dataString='var1='+ var1 +'&var2='+ var2 +'&var3='+ var3 +'&var4='+ var4;
    $.ajax({
    type: "POST",
    url: "wp-content/themes/customizr/book/process2.php",
    data:dataString,
    cache:false,
    success: function(html){
        $('#resbox').html(html);
    }
    });
    return false;
}
</script>
<body>
<div id="rcorners1">
    <form action='wp-content/themes/customizr/book/index.php' method='post'>
    <label>Departure:</label>
        <select name="departures" id="departures-list" class="form-control" onchange="getArrival(this.value);">
        <option value="">Select Departure</option>
                    <?php
                        require('wp-content/themes/customizr/book/prova1.php');
                        $sql1 = "SELECT * FROM departures";  
                        $result1 = $mysqli->query($sql1);
                        while($row1 = $result1->fetch_assoc()){
                    ?>   
                    <option value="<?php echo $row1["dep_name"]; ?>|<?php echo $row1["dep_air"]; ?>"><?php echo $row1["dep_name"]; ?></option>
                    <?php } ?>
        </select>
        <label>Arrival:</label>
        <select id="arrivals-list" name="arrivals">
        <option value="">Select Arrival</option>
        </select>
<input id="input" type="submit" name="submit" onclick="return chk()" value="Get Price" />
</form>

【问题讨论】：

请提供MCVE 并查看Tour 以改进您的问题

标签： javascript php wordpress

【解决方案1】：

您的网站中有两个不同的div。其中一个是id = image，第二个是id = modulemin。当screen size < 800px width 使用css（display = none）时隐藏id = image 的div，当screen size > 799px width 使用css（display = none）时隐藏第二个。并且它们都有相似的形式。为什么你需要它？为什么只有不同的屏幕尺寸才有2个相似的表格？

您的主要问题是id's 的form inputs 变量var1, var2 ...。您试图在此行中使用inputs 的ids 获取一些信息：

var var1=document.getElementById('departures-list').value;

但是，正如你所理解的，你总是只能从DOM tree 的第一个表单中得到inputs，因为在找到任何id 的第一次出现后，js 停止搜索并返回它。您可以在任何js 文档中找到有关它的更多详细信息。

您可以使用class 而不是id 从页面中获取所有具有相同类名的inputs。您可以使用一些不同的id 作为表单，然后将inputs 与id/name/class/tagname 作为该表单的子node（ex.）。

另外，强烈建议不要将ajax 请求发送到其他文件。取而代之的是wp-ajax。

【讨论】：

感谢您的回复，但一切正常。我唯一遇到的问题是减少了模块。当屏幕尺寸大于 799px 时，它可以正常工作。我创建了两个 div，因为当屏幕变薄时，我希望图像消失并扩展模块。
非常感谢。我只留下了一个使用 CSS 的模块，现在一切正常。祝你有美好的一天。