установить значения из массива jquery объектов php?

Question

установить значения из массива 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);
}

});
});
});

5

arrays dom dynamic-html jquery php

Решение

Другие решения

Альтернативное решение ..

Если вы добавили какой-то идентификатор для каждого блока продукта, как показано ниже:

<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) выбраны и изменены.

0

Источник

Accepted Answer

Вы можете видеть, что код 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

2