获取Div的宽度,并根据元素的数量限制mySQL查询
Get the Width of Div and LIMIT the mySQL query according to no of elements?
我需要在中显示图像的数量
<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中使用它。但不幸的是,我不知道该怎么做。
您可以使用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');
}
});
});
您可以在加载页面时将其作为get参数传递。例如,当创建链接以加载下一页时,只需将其添加为param即可。在初始页面加载时,您会得到所有图像,但只显示可用分辨率所需的图像
您必须使用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().
相关文章:
- 更新从Mysql查询检索到的数据?Node.js节点mysql
- 浓缩一系列mySQL查询
- 如何翻译MySQL查询's ResultSet转换为整数
- 如何在mysql查询(NODE.js)中重复使用一个参数
- onclick->mysql查询->javascript;同一页
- 向更新mysql查询传递一个id
- 如何在下拉列表更改时自动填充mysql查询结果中的文本框值
- mysql查询一次在单个查询中的多个表中插入记录
- 添加行并运行多个mySQL查询
- 如何将mysql查询的结果获取到html文本框中
- 数组数据排序类似mysql查询
- 使用jquery显示mysql查询结果
- 通过 AJAX 调用 PHP 文件,将 $_GET 变量传递到 MySQL 查询中,然后回显到响应中
- 使用 mysql 查询从单列返回值
- 如何使用表值来使用PHP驱动mySQL查询
- php中的mysql查询不起作用,但它在另一个php文件中起作用
- 使用MySQL查询或javascript进行数据优化
- 如何在nodejs中的MySQL查询中使用多个变量
- 如何在不输出结束PHP标签“?>”的情况下将PHP MySQL查询回显到Javascript变量中
- 模型对象构造函数中的节点mysql查询