根据元素的数量获取 Div 的宽度并限制 mySQL 查询？

Posted 2023-05-09

【中文标题】根据元素的数量获取 Div 的宽度并限制 mySQL 查询？

【英文标题】：Get the Width of Div and LIMIT the mySQL query according to no of elements?

【发布时间】：2012-02-05 11:06:17

【问题描述】：

我需要显示图片的数量

<li><img class='1'><img class='1'><img class='1'></li>
<li><img class='1'><img class='1'><img class='1'></li>

但由于我的 div 会根据屏幕宽度自动增加。我需要根据 div 的宽度计算要显示的图像数量，假设宽度为 1200px 并且每个图像将是 150px 。所以要显示的图像数量是 8 。

<script type='text/javascript'>
var screen_width = document.getElementById('div_1').offsetWidth();
var no_of_images =Math.round(screen_width/100);
</script>

我正在使用 LIMIT 查询从 mysql 数据库获取图像。我想将其限制为使用 var no_of_images 获得的图像。但由于他们没有将 javascript 变量集成到 mysql 查询中的直接规则。我想将它传递给 php 变量，然后在 Mysql 中使用它。但不幸的是，我不知道该怎么做。

【参考方案1】：

您可以使用document.ready 事件处理程序来确保 DOM 已准备好进行操作，然后向您的服务器端脚本发出 AJAX 请求，该脚本可以输出 html 以获得正确数量的图像以放置在容器中：

//wait for the `document.ready` event to fire
$(function () 

    //cache the container element since it will be used later more than once
    //also get the width of the container and figure out how many 150px wide images can fit without being clipped
    //note that this does not take into consideration any padding/margin/border for the images
    var $container   = $('#div_1'),
        screen_width = $container.width(),
        no_of_images = Math.floor(screen_width / 150);

    //create an AJAX call to your server-side script to get the image HTML
    $.ajax(
        url  : '<URL>',
        type : 'get',//or 'post'
        data :  'no_of_images' : no_of_images ,//jQuery will handle data encoding if you pass it an object
        success : function (serverResponse) 

            //now the AJAX request has returned successfully so this fades the container out, replaces it's HTML with the server response and then fades back in
            $container.fadeOut(500, function () 
                $container.html(serverResponse).fadeIn(500);
            );
        ,

        //if an error occurs with the AJAX call this is how you handle it, you may just try to re-send the AJAX call
        error   : function () 
            alert('an error occured');
        
    );
);

【参考方案2】：

您可以在加载页面时将其作为获取参数传递。例如创建链接以加载下一页时，只需将其添加为参数。在初始页面加载时，您会获得所有图像，但仅显示可用分辨率所需的图像

【讨论】：

我知道这一点，但实际上这不是我需要的。有什么方法可以在 PHP 中获取 div 的偏移宽度。然后我可以解决我的问题

不，您不能从 PHP 访问它。 PHP 在服务器上运行，javascript 在客户端运行。传回内容的唯一方法是重新加载页面或进行 ajax 调用

【参考方案3】：

你必须使用 AJAX。

<script type='text/javascript'>
    var screen_width = document.getElementById('div_1').offsetWidth();
    var no_of_images =Math.round(width/100);

    $.ajax(
        type: "post",
        url: "script.php",
        data: "no_of_images="+no_of_images,
        success: function()
            // do something
        
    );
</script>

你必须使用 jQuery 来让我的代码工作，因为我使用了 jQuery 方法 $.ajax()。