установить значения из массива jquery объектов php?
Я получаю определенный список товаров через ajax, передавая их уникальный идентификатор на сервер. Теперь у каждого товара есть свой набор свойств, которые я должен отображать на странице с изображением товара. Когда я устанавливал значения через jquery, печаталось только последнее значение в массиве. Ниже приведены мои файлы кодирования.
images.php
while($fetch = mysql_fetch_array($result))
{
?>
<div class="col-sm-4">
<div class="thumbnail">
<a class="productitemid" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>"><img class="img-responsive productimage" src="uploadedfiles\<?php echo $fetch['imageURL'];?>" alt="<?php echo $fetch['imageURL'];?>" /></a>
<div class="text-center productitemname" style="font-weight:bold;"><?php echo $fetch['itemName']; ?></div>
<div class="badge col-sm-offset-1 productprice"><?php echo $fetch['price']; ?></div>
<span class="col-md-offset-7"><a class="productitemid btn btn-success" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>">BUY</a></span>
</div>
</div>
<?php
}
JS файл
$(document).ready(function(){
$('.menProdCatgry').on('click',function(){
$.ajax({
type: "post",
url: "getselectedproducts.php",
data:{
"prodId" : $('.menProdCatgry').attr('prodCatId')
},
dataType: "json",
success: function(data){
console.log(data);
$.each(data, function(){
var getprodId = this.prodId;
var getimageURL = this.imageURL;
var getprice = this.price;
var getitemName = this.itemName;
var getitemID = this.itemID;
$('.productimage').attr('src','uploadedfiles\/'+getimageURL);
$('.productitemname').text(getitemName);
$('.productprice').text(getprice);
$('.productitemid').attr('href','productpurchase.php?id='+getitemID);
});
},
error: function(data){
console.log(data);
}
});
});
});
Решение
Вы можете видеть, что код foreach только перезаписывает значения и атрибуты
$('.productimage'),
$('.productitemname')
// and so on
так что вы видите только последние данные ответа
$.each(data, function() {
var getprodId = this.prodId;
var getimageURL = this.imageURL;
var getprice = this.price;
var getitemName = this.itemName;
var getitemID = this.itemID;
// create a tag
var a = $('<a/>');
a.attr('href', 'productpurchase.php?id='+getitemID);
// create new image
var img = $('<img/>');
img.attr('src', 'uploadedfiles/'+getimageURL);
var prodname = $('<div/>')
prodname.html(getitemName);
var prodprice = $('<div/>');
prodprice.html(getprice);
// insert image to a
a.append(img);
var container = $('<div/>');
// combine them all
container.append(a);
container.append(prodname);
container.append(prodprice);
// append to document
// you can change this according to you need
// to accomplish
$('body').append(container);
});
здесь я создал динамический элемент DOM для каждой итерации foreach
затем он создаст новые наборы данных, затем он вставит / включить / добавить
к элементу HTML
Другие решения
Альтернативное решение ..
Если вы добавили какой-то идентификатор для каждого блока продукта, как показано ниже:
<div class="thumbnail" id="prodId<?php echo $fetch['prodId'];?>">
Вы можете сузить селектор в вашем each в конкретной области:
$.each(data, function(){
var getprodId = this.prodId;
var getimageURL = this.imageURL;
var getprice = this.price;
var getitemName = this.itemName;
var getitemID = this.itemID;
var myScope = '#prodId' + getprodId;
$('.productimage', myScope).attr('src','uploadedfiles\/'+getimageURL);
$('.productitemname', myScope).text(getitemName);
$('.productprice', myScope).text(getprice);
$('.productitemid', myScope).attr('href','productpurchase.php?id='+getitemID);
});
Это позволит убедиться, что только классы, найденные в вашем определенном объем (#prodIdX) выбраны и изменены.