Question

我正在建立一个网站。我正在使用bootstrap carousel，我根据屏幕的方向动态添加图像。

通过JavaScript我测量屏幕的宽度和高度，并通过ajax将宽度，高度和id发布到php。
在php中收到宽度，高度，id，php从mysql表中获取关于id的所有数据。
如果宽度大于高度，那么它是横向方向，它将横向列下的所有值转换为json。
否则为纵向，并将纵向列下的所有值转换为json。
ajax回调json数据并将其正确附加到数据中。

我的问题是当屏幕处于横向模式时，它会显示所有风景图像（示例5图像）。当方向更改为纵向时，ajax工作并获取肖像图像（示例5图像）并添加到现有的风景图像，从而生成10个图像。如果我再次更改方向，则再次添加风景图像，从而生成15张图像。刷新页面后，仅显示相对于方向的5个图像。

如何在不刷新页面的情况下进行此操作（当方向从横向更改为纵向时，应删除所有横向图像并添加纵向图像而不刷新页面。）

<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body onresize="send_screen_size()" onload="send_screen_size()">
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" >
    <div class="carousel-inner"></div>
  </div>
</div>
</body>
</html>

function send_screen_size(sParam){

    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return decodeURIComponent(sParameterName[1]);
        }
    }



    if(window.innerWidth !== undefined && window.innerHeight !== undefined) {
                 var w = window.innerWidth;
                 var h = window.innerHeight;
             } else {
                 var w = document.documentElement.clientWidth;
                 var h = document.documentElement.clientHeight;
            }
            var 
            width =  + w ;
            height =  + h;

    var width = width =  + w ;
    var height = height =  + h;
    var pro_id = send_screen_size('pro_id');

 $.ajax({
    async : "false", // !!!MAKE SURE THIS ONE IS SET!!!
    type:"POST",
    url: "carousel.php",
    data:{width: width, height: height, pro_id:pro_id},
    dataType: 'json',
    success: function (data){
    $.each(data, function(i, item) {
    $('.carousel-inner').append('<div class = item>'+item.orientation+'</div>')
      })
    $('.carousel-inner > :first-child').addClass("active");
    },
    error: function(xhr, status, error) {
      var err = eval("(" + xhr.responseText + ")");
      console.log(error);
    }

   });
 }

Answer 1

你可以尝试

$('.carousel-inner .item').remove();

在$ .ajax调用之前

。

您可能还想对窗口onresize事件侦听器进行限制或去抖动。

大小更改删除现有图像并动态添加其他图像而不重新加载页面

1 个答案: