jquery while loop
jquery while loop
我想显示每个广告的距离（缩略图）。我正在使用Google Maps JavaScript API。问题是只有第一个广告显示距离，或者，如果我更改代码，每个距离都会显示在每个缩略图中。
当缩略图处于 while 循环中时，如何显示与谷歌（或 jQuery）的距离？非常感谢您的帮助。
这是代码：
<?php
include 'includes/db.inc.php'; //Connection to the database.
include 'includes/login.inc.php'; //Processes the login and the sign up info to fetch the user info in the database.
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Vous avez besoin d'un service économique? Trouvez-le sur Jobbinn.">
<meta name="keywords" content="petites annonces classées, kijiji, Les PACs">
<meta name="author" content="">
<link rel="icon" href="images/jobbinn_logo.png" type="image/png" sizes="16x16">
<title>Jobbinn</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS file -->
<link href="bootstrap/css/custom.css" rel="stylesheet" type="text/css">
<!-- Font Awesome -->
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
<!-- stylesheet for index.php (style folder) -->
<link href="style/index.css" rel="stylesheet" type="text/css">
<!-- Roboto Condensed Font -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<?php
if(isset($_SESSION['email']) && isset($_SESSION['password']) == true) {
$sel_sql = "SELECT * FROM users WHERE email = '$_SESSION[email]' AND password = '$_SESSION[password]'";
if($run_sql = mysqli_query($conn, $sel_sql)) {
if(mysqli_num_rows($run_sql) == 1) {
include 'includes/dash_header.inc.php';
}
}
}
?>
<?php include 'includes/header.inc.php'; ?>
<?php include 'includes/subheader.inc.php'; ?>
<div id="head">
<div class="container bring-down">
<div class="row">
<div class="col-md-12">
<h2>Vous avez besoin d'un service économique? </br> Trouvez-le sur Jobbinn.</h2>
<h4>Trouvez. Achetez. Profitez de la vie.</h4>
<form class="form-group" action="search.php">
<input type="search" name="search" class="form-control" placeholder="Que recherchez-vous?">
<button name="search_submit" type="submit" class="btn btn-danger btn-lg">Trouver un service</button>
<a id="start" href="startselling.php" class="btn btn-danger btn-lg">Commencer à vendre</a>
</form>
<div class="icon-align-right">
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//www.jobbinn.com"><i class="fa fa-facebook-square fa-2x icon-spacing" style="color:#F1F1EC;"></i></a>
<a href="https://twitter.com/home?status=Quand%20vous%20voulez%20un%20travail%20bien%20fait%20sans%20que%20%C3%A7a%20vous%20co%C3%BBte%20un%20bras.%20http%3A//www.jobbinn.com%20%23mtl"><i class="fa fa-twitter-square fa-2x icon-spacing" style="color:#F1F1EC;"></i></a>
<a href="https://www.instagram.com/instajobbinn"><i class="fa fa-instagram fa-2x icon-spacing" style="color:#F1F1EC;"></i></a>
<a href="https://plus.google.com/share?url=http%3A//www.jobbinn.com"><i class="fa fa-google-plus-square fa-2x icon-spacing" style="color:#F1F1EC;"></i></a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A//www.jobbinn.com&title=Quand%20vous%20voulez%20un%20travail%20bien%20fait,%20sans%20payer%20un%20bras.&summary=&source="><i class="fa fa-linkedin-square fa-2x icon-spacing" style="color:#F1F1EC;"></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="thumbnails">
<div class="container">
<h2>Services Populaires</h2>
<h4 style="color:#333;">Choisissez parmi nos services les plus populaires.</h4>
<div class="row">
<?php
$return_arr = array();
$sel_sql = "SELECT
a_id AS annonce_id,
titre AS annonce_titre,
image AS annonce_image,
price AS annonce_prix,
postal_code AS annonce_code,
city AS annonce_ville,
numcommentaires AS num_commentaires,
SUM(communication)+SUM(service)+SUM(recommandation) AS total_rating
FROM annonces a
INNER JOIN users u
ON a.user_id = u.id
LEFT JOIN (SELECT
b.ad_id,
SUM(communication) AS communication,
SUM(service) AS service,
SUM(recommandation) AS recommandation,
COUNT(id) AS numcommentaires
FROM commentaires b
GROUP BY b.ad_id) b
ON a.a_id = b.ad_id
WHERE statut = 'published'
GROUP BY a_id
LIMIT 20
";
$conn->set_charset("utf8");
$run_sql = mysqli_query($conn, $sel_sql);
while ($rows = mysqli_fetch_assoc($run_sql)) {
$return_arr[] = $rows['annonce_code'];
echo '
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<a href="annonce.php?post_id='.$rows['annonce_id'].'">
<input class="tid" type="hidden" name="annonceid" value="'.$rows['annonce_id'].'">
<input class="tid" type="hidden" name="annoncecode" value="'.$rows['annonce_code'].'">
<p>'.$rows['annonce_titre'].'</p>
<img src="'.$rows['annonce_image'].'" alt="image">
<div class="caption">
<div>
<h3 style="color:#05C33C; font-weight:bold;">'.$rows['annonce_prix'].'$</h3>
<p style="color:#FE6E32;">'.($rows['num_commentaires'] == '' ? 'nouveau' : ''.substr($rows['total_rating'] / $rows['num_commentaires'] / 3,0,3).'/10 ('.$rows['num_commentaires'].')').'</p>
<p>'.$rows['annonce_ville'].'</p>
<p class="distance-'.$rows['annonce_id'].'"></p>
</div>
</div>
</a>
</div>
</div>
';
}
$postal = json_encode($return_arr);
?>
</div>
</div>
</div>
<div id="bottom-container" class="container profile text-center">
<div class="row">
<div class="col-md-4 col-xs-12">
<img src="images/icon_graph.png" class="img-circle">
<h3>Faites avancer les choses</h3>
<p>Des gens qui aiment se qu'ils font vous aident à tout faire à un prix imbattable.</p>
</div>
<div class="col-md-4 col-xs-12">
<img src="images/icon_money.png" class="img-circle">
<h3>Offrez vos services</h3>
<p>Qu'est-ce que vous faites de mieux? Créez votre annonce et commencez à vendre. C'est gratuit et ça prend seulement 5 minutes.</p>
</div>
<div class="col-md-4 col-xs-12">
<img src="images/icon_gears.png" class="img-circle">
<h3>Confiance et sécurité</h3>
<p>Votre sécurité est notre top priorité. Des transactions sécuritaires et notre équipe vous protègent en tout temps.</p>
</div>
</div>
</div>
<footer>
<?php include 'includes/footer.inc.php'; ?>
</footer>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="scripts/index.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
$.each($(".thumbnail"), function() {
$this = $(this);
id = $this.find('input[name="annonceid"]').val();
code = $this.find('input[name="annoncecode"]').val();
//$this.find('input[name="annonceid"]').val(text);
$(".distance-" + id).text(code + "/" + id);
var service = new google.maps.DistanceMatrixService(); //Creates a new request to the API
service.getDistanceMatrix({
origins: ['"' + code + '"'], //The seller side
destinations: ["J7Z 7B9"], //The buyer side
travelMode: google.maps.TravelMode.DRIVING,//Can have multiple travel mode like driving, cycling and walking
}, callback);
function callback(response, status) { //We get a document in JSON format
if (status == google.maps.DistanceMatrixStatus.OK) {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
var element = results[j];
var distance = element.distance.text; //The distance between the origin and a destination
var duration = element.duration.text; //The time it takes to get there
var from = origins[i];
var to = destinations[j];
console.log(element);
console.log(distance);
console.log(duration);
console.log(from);
console.log(to);
}
}
}
}
});
</script>
</body>
</html>
根据规范，HTML 中的 id 属性必须是唯一的。 因此，当你操作#distance时，jQuery将假设只有一个元素。这给您留下了您看到的行为，其中只有第一个元素具有所需的结果。
为了解决这个问题，你可以简单地将行 id 作为 id 的一部分，如下所示：#distance-1、#distance-2 等。
相关文章：
- JavaScript while (sentinel controlled loop) error
- JavaScript while-loop不起作用
- While-Loop Logic JavaScript
- jquery while loop
- 为什么获胜'我的While Loop工作
- JavaScript - while loop
- JavaScript -- while loop
- Do While Loop for AJAX?
- 当IF满足要求时，停止Do While LOOP
- 如何打印While Loop
- JavaScript async/await and do/while loop
- Javascript in While Loop PHP
- Javascript while loop innerHTML
- While loop and setInterval()
- Javascript while loop = new to javascript
- 对while loop / indexOf()感到困惑
- Selenium While Loop?
- While LOOP - PHP -动态关闭括号
- Promise in while loop javascript
- 用While Loop &构建一个以年递增月份的函数;Momentjs
