我有一个PHP服装数组，这里是数组。
<?php
$garments = array(
"garment1" => array
(
"id" => "GD01_Mens",
"productName" => "Basic Gildan T-Shirt",
"front_image" => "garments/product_type_1_front.png",
"back_image" => "garments/product_type_1_back.png",
"basePrice" => 1.05,
"colour" => array(
"white" => "#ffffff",
"natural" => "#F3EDC7",
"red" => "#EC1111",
"purple" => "#7C1E4B",
"sangria" => "#C10051",
"orange" => "#EA4800",
"gold" => "#FBB100",
"yellow" => "#F8DD34",
"pink" => "#FACDE6",
"purple" => "#4F448F",
"natural" => "#F3EDC7",
"purple" => "#4F448F",
"navy" => "#072C57",
"royal" => "#1534AE",
"tahiti" => "#248AC0",
"sky" => "#5AA7FF",
"grass" => "#5FAD4A",
"kelly" => "#268140",
"army" => "#48422A",
"charcoal" => "#534F4F",
"silver" => "#D6D6D6",
"black" => "#282627"
)
),
"garment2" => array
(
"id" => "GD03_Mens",
"productName" => "V Neck Gildan T-Shirt",
"front_image" => "garments/product_type_13_front.png",
"back_image" => "garments/product_type_13_back.png",
"basePrice" => 1.55,
"colour" => array(
"white" => "#ffffff",
"natural" => "#F3EDC7",
"red" => "#EC1111",
"purple" => "#7C1E4B",
"sangria" => "#C10051",
"orange" => "#EA4800",
"gold" => "#FBB100",
"yellow" => "#F8DD34",
"pink" => "#FACDE6",
"purple" => "#4F448F",
"natural" => "#F3EDC7",
"purple" => "#4F448F",
"navy" => "#072C57",
"royal" => "#1534AE",
"tahiti" => "#248AC0",
"sky" => "#5AA7FF",
"grass" => "#5FAD4A",
"kelly" => "#268140",
"army" => "#48422A",
"charcoal" => "#534F4F",
"silver" => "#D6D6D6",
"black" => "#282627"
)
),
"garment3" => array
(
"id" => "AA01_Mens",
"productName" => "American Apparel",
"front_image" => "garments/product_type_49_front.png",
"back_image" => "garments/product_type_49_back.png",
"basePrice" => 1.95,
"colour" => array(
"white" => "#ffffff",
"natural" => "#F3EDC7",
"red" => "#EC1111",
"purple" => "#7C1E4B",
"sangria" => "#C10051",
"orange" => "#EA4800",
"gold" => "#FBB100",
"grass" => "#5FAD4A",
"kelly" => "#268140",
"army" => "#48422A",
"charcoal" => "#534F4F",
"silver" => "#D6D6D6",
"black" => "#282627"
)
),
"garment4" => array
(
"id" => "BellaCanvas_Mens",
"productName" => "Bella and Canvas Mens",
"front_image" => "garments/product_type_13_front.png",
"back_image" => "garments/product_type_13_back.png",
"basePrice" => 1.35,
"colour" => array(
"white" => "#ffffff",
"natural" => "#F3EDC7",
"red" => "#EC1111",
"purple" => "#7C1E4B",
"sangria" => "#C10051",
"pink" => "#FACDE6",
"purple" => "#4F448F",
"natural" => "#F3EDC7",
"purple" => "#4F448F",
"navy" => "#072C57",
"royal" => "#1534AE",
"tahiti" => "#248AC0",
"sky" => "#5AA7FF",
"silver" => "#D6D6D6",
"black" => "#282627"
)
),
"garment5" => array
(
"id" => "StanStella_Mens",
"productName" => "V Neck Stanley Stella",
"front_image" => "garments/product_type_13_front.png",
"back_image" => "garments/product_type_13_back.png",
"basePrice" => 2.65,
"colour" => array(
"white" => "#ffffff",
"natural" => "#F3EDC7",
"red" => "#EC1111",
"black" => "#282627"
)
),
"garment6" => array
(
"id" => "FOTL_Mens",
"productName" => "FOTL Mens T-Shirt",
"front_image" => "garments/product_type_13_front.png",
"back_image" => "garments/product_type_13_back.png",
"basePrice" => 4.55,
"colour" => array(
"white" => "#ffffff",
"natural" => "#F3EDC7",
"red" => "#EC1111",
"purple" => "#4F448F",
"black" => "#282627"
)
),
);
?>
并使用标准PHP循环我有：
<div class="" id="garmentWindow">
<div id="selectGarment">
<div id="selectGarment-Innerwrap">
<?php foreach ($garments as $garment) { ?>
<div class="garmentPanel" id="<?php echo $garment['id'];?>">
<div class="garmentImgURL"><span id="imgPath" style="display:none;"><?php echo $garment['front_image'];?></span><img src="<?php echo $garment['front_image'];?>"></div>
<span id="garmentID" style="display:none;"><?php echo $garment['id'];?></span>
<div class="garmentName"><?php echo $garment['productName'];?></div>
<div class="garmentPrice">£<span class="basePrice"><?php echo $garment['basePrice'];?></span></div>
</div>
<?php } ?>
</div>
<button class="largeBtn" id="useSelected">Use Selected Garment</button>
</div>
</div>
我还有一个服装颜色选择器，它与jquery一起使用来改变图像颜色（图像是透明的，它会改变图像下方div的背景颜色）
<div id="garmentColor">
<select name="colorpicker-picker-longlist" id="colorDropdown">
<option value="#fff">#fff</option>
<option value="#222222">#222222</option>
<option value="#ac725e">#ac725e</option>
<option value="#d06b64">#d06b64</option>
<option value="#f83a22">#f83a22</option>
<option value="#fa573c">#fa573c</option>
<option value="#ff7537">#ff7537</option>
<option value="#ffad46">#ffad46</option>
<option value="#42d692">#42d692</option>
<option value="#16a765">#16a765</option>
<option value="#7bd148">#7bd148</option>
<option value="#b3dc6c">#b3dc6c</option>
<option value="#fbe983">#fbe983</option>
<option value="#fad165">#fad165</option>
<option value="#92e1c0">#92e1c0</option>
<option value="#9fe1e7">#9fe1e7</option>
<option value="#9fc6e7">#9fc6e7</option>
<option value="#4986e7">#4986e7</option>
<option value="#9a9cff">#9a9cff</option>
<option value="#b99aff">#b99aff</option>
<option value="#c2c2c2">#c2c2c2</option>
<option value="#cabdbf">#cabdbf</option>
<option value="#cca6ac">#cca6ac</option>
<option value="#f691b2">#f691b2</option>
<option value="#cd74e6">#cd74e6</option>
<option value="#a47ae2">#a47ae2</option>
</select>
</div>
这是我的JS：
$(document).ready(function () {
$(".garmentPanel").click(function (event) {
$('#src_garmentBasePrice').text($(this).find('.basePrice').text());
$("#src_garmentID").text($(this).find('#garmentID').text());
$("#src_garmentName").text($(this).find('.garmentName').text());
$("#src_garmentImgUrl").text($(this).find('#imgPath').html());
var imgSrc = document.getElementById("src_garmentImgUrl").innerHTML ;
$("#garment_img").attr("src",imgSrc);
});
});
我想做的是填充 使用PHP数组中的颜色，选择该产品时。
我有一个包含所有图片，名称，价格的div，当我选择它们时，主网站中心图像会发生变化，价格和产品名称也会发生变化等。
然后我为服装颜色单独下拉，但有些服装的颜色与其他颜色不同。当选择产品时，是否可以使用数组中的颜色填充？
答案 0 :(得分：0)
您必须使用多个循环。一个简单的例子：
<div class="" id="garmentWindow">
<div id="selectGarment">
<div id="selectGarment-Innerwrap">
<?php foreach ($garments as $garment): ?>
<div class="garmentPanel" id="<?php echo $garment['id'];?>">
<div class="garmentImgURL"><span id="imgPath" style="display:none;"><?= $garment['front_image']; ?></span><img src="<?= $garment['front_image']; ?>"></div>
<span id="garmentID" style="display:none;"><?= $garment['id']; ?></span>
<div class="garmentName"><?= $garment['productName']; ?></div>
<div class="garmentPrice">£<span class="basePrice"><?= $garment['basePrice'];?></span></div>
<div class="garmentColor">
<select name="colorpicker-picker-longlist" id="colorDropdown">
<?php foreach ($garment['colour'] as $colorId => $color): ?>
<option value="<?= $color; ?>"><?= $colorId; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<?php endforeach; ?>
</div>
<button class="largeBtn" id="useSelected">Use Selected Garment</button>
</div>
答案 1 :(得分：0)
HTML更正
您需要在foreach循环中添加以下行，如下所示：
<input type="hidden" class="garmentColor" value='<?php echo json_encode($garment['colour']);?>'>
以下是HTML和PHP foreach循环的修改版本：
<div class="" id="garmentWindow">
<div id="selectGarment">
<div id="selectGarment-Innerwrap">
<?php foreach ($garments as $garment) { ?>
<div class="garmentPanel" id="<?php echo $garment['id'];?>">
<div class="garmentImgURL"><span id="imgPath" style="display:none;"><?php echo $garment['front_image'];?></span><img src="<?php echo $garment['front_image'];?>"></div>
<span id="garmentID" style="display:none;"><?php echo $garment['id'];?></span>
<div class="garmentName"><?php echo $garment['productName'];?></div>
<div class="garmentPrice">£<span class="basePrice"><?php echo $garment['basePrice'];?></span></div>
<input type="hidden" class="garmentColor" value='<?php echo json_encode($garment['colour']);?>'>
</div>
<?php } ?>
</div>
<button class="largeBtn" id="useSelected">Use Selected Garment</button>
</div>
</div>
Javascript更正
我添加了以下代码行以使其工作：
var colorList = $(this).find('.garmentColor').val();
if(colorList){
var colorObj = JSON.parse(colorList);
var optionHTML = '';
for(i in colorObj){
optionHTML += '<option value="' + colorObj[i] + '">' + i + '</option>';
}
if(optionHTML){
$('#colorDropdown').html(optionHTML);
}
}
以下是您的代码和我的更改的集成版本：
$(document).ready(function () {
$(".garmentPanel").click(function (event) {
$('#src_garmentBasePrice').text($(this).find('.basePrice').text());
$("#src_garmentID").text($(this).find('#garmentID').text());
$("#src_garmentName").text($(this).find('.garmentName').text());
$("#src_garmentImgUrl").text($(this).find('#imgPath').html());
var imgSrc = document.getElementById("src_garmentImgUrl").innerHTML;
$("#garment_img").attr("src",imgSrc);
var colorList = $(this).find('.garmentColor').val();
if(colorList){
var colorObj = JSON.parse(colorList);
var optionHTML = '';
for(i in colorObj){
optionHTML += '<option value="' + colorObj[i] + '">' + i + '</option>';
}
if(optionHTML){
$('#colorDropdown').html(optionHTML);
}
}
});
});
答案 2 :(得分：0)
看起来Beroza Paul打败了我同样的风格解决方案，但仍然有点不同。我将颜色数据存储为JSON对象，而他的解决方案将其存储为隐藏输入文本框的值。
JavaScript的：
function update_colours(garmentID) {
var options = [];
$.each(garment_colors[garmentID], function(key, value) {
options.push('<option value="'+ key +'">'+ value +'</option>');
});
$('#colorDropdown').html(options.join(''));
}
$(document).ready(function () {
$(".garmentPanel").click(function (event) {
var garmentID = $(this).attr('id');
update_colours(garmentID);
$('#src_garmentBasePrice').text($(this).find('.basePrice').text());
$("#src_garmentID").text($(this).find('#garmentID').text());
$("#src_garmentName").text($(this).find('.garmentName').text());
$("#src_garmentImgUrl").text($(this).find('#imgPath').html());
var imgSrc = document.getElementById("src_garmentImgUrl").innerHTML ;
$("#garment_img").attr("src",imgSrc);
});
});
HTML / PHP：
<div class="" id="garmentWindow">
<div id="selectGarment">
<div id="selectGarment-Innerwrap">
<script>garment_colors = {};</script>
<?php foreach ($garments as $garment) { ?>
<div class="garmentPanel" id="<?php echo $garment['id'];?>">sdds
<div class="garmentImgURL"><span id="imgPath" style="display:none;"><?php echo $garment['front_image'];?></span><img src="<?php echo $garment['front_image'];?>"></div>
<span id="garmentID" style="display:none;"><?php echo $garment['id'];?></span>
<div class="garmentName"><?php echo $garment['productName'];?></div>
<div class="garmentPrice">£<span class="basePrice"><?php echo $garment['basePrice'];?></span></div>
</div>
<script> garment_colors['<?php echo $garment['id'];?>'] = <?echo json_encode($garment['colour']);?> </script>
<?php } ?>
</div>
<button class="largeBtn" id="useSelected">Use Selected Garment</button>
</div>
</div>