Holen Sie sich die Breite von Div und LIMIT die MySQL-Abfrage nach Nein von Elementen? - PHP, Javascript, JQuery, MySQL, HTML

Ich musste die Anzahl der Bilder anzeigen

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

aber wie mein div sich automatisch erhöhtBildschirmbreite. Ich musste die Anzahl der Bilder berechnen, um sie entsprechend der Breite von div anzuzeigen. Angenommen, die Breite beträgt 1200px und jedes Bild 150px. Die Anzahl der angezeigten Bilder beträgt also 8.

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

Ich bekomme die Bilder aus der MySQL-Datenbank,mit LIMIT-Abfrage .. Ich möchte es auf keine Bilder limitieren, die ich mit var no_of_images. Aber da es keine direkte Regel der Integration von Javascript-Variablen in MySQL-Abfrage ist. Ich möchte es an PHP-Variable übergeben und dann in Mysql verwenden. Aber leider weiß ich nicht, wie es geht.

Antworten:

Du kannst den ... benutzen document.ready Event-Handler, um sicherzustellen, dass das DOM bereit istmanipuliert und dann eine AJAX-Anfrage an Ihr serverseitiges Skript gestellt, das den HTML-Code für die korrekte Anzahl von Bildern ausgeben kann, die im Container platziert werden sollen:

//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");
}
});
});

Sie können es als Get-Param beim Laden der übergebenSeite. z.B. Wenn Sie den Link zum Laden der nächsten Seite erstellen, fügen Sie ihn einfach als Parameter hinzu. Beim ersten Laden der Seite erhalten Sie alle Bilder, die nur für die verfügbare Auflösung angezeigt werden

Sie müssen AJAX verwenden.

<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>

Sie müssen jQuery verwenden, damit mein Code funktioniert, weil ich die jQuery-Methode $ .ajax () verwendet habe.