简而言之：我正在使用相同的 JS 函数来旋转可能来自多个类别的图像，并且它适用于除 1 之外的所有类别。我完全被难住了。
详细信息：我正在编写一个 JavaScript 应用程序来制作鸡尾酒食谱。食谱的成分通过 php/mysql 引入 javascript。我已经在 JavaScript 和 PHP 中测试了这些变量，并且它们都被正确填充。
//Function to store db table in to two dimensional $array[id][attribute]
function getRows($table, $mysql) {
$query = "SELECT * FROM ".$table;
$result = mysqli_query($mysql, $query);
$num = mysqli_num_rows($result);
if ($num > 0) {
while ($row = mysqli_fetch_assoc($result)) {
// You have $row['id'], $row['name'], $row['image']
$var[$row['id']] = array('id' => $row['id'], 'name' => $row['name'], 'image' => $row['image']);
$var['num'] = $num;
}
}
return $var;
}
//Use the function above to populate all the PHP variables, then convert each to Javascript
echo "<script>\n";
$actions = getRows('actions', $mysql);
$js_actions = json_encode($actions);
echo "var actions = ". $js_actions . ";\n";
$bottles = getRows('bottles', $mysql);
$js_bottles = json_encode($bottles);
echo "var bottles = ". $js_bottles . ";\n";
$garnishes = getRows('garnishes', $mysql);
$js_garnishes = json_encode($garnishes);
echo "var garnishes = ". $js_garnishes . ";\n";
$mixers = getRows('mixers', $mysql);
$js_mixers = json_encode($mixers);
echo "var mixers = ". $js_mixers . ";\n";
将其输出到浏览器
<script>
var actions = {"1":{"id":"1","name":"Stir","image":"stir.png"},"num":3,"2":{"id":"2","name":"Shake","image":"ShakeAndStrain.png"},"3":{"id":"3","name":"Muddle","image":"muddle.png"}};
var bottles = {"1":{"id":"1","name":"Bourbon","image":"jim_beam.png"},"num":2,"2":{"id":"2","name":"Sugar","image":"GARNISH_SugarCube.png"}};
var garnishes = {"1":{"id":"1","name":"Orange and Cherry","image":"GARNISH_orange-AND-cherry.png"},"num":2,"2":{"id":"2","name":"Sugar Cube","image":"GARNISH_SugarCube.png"}};
var mixers = {"1":{"id":"1","name":"Water","image":"Not yet"},"num":4,"2":{"id":"2","name":"Soda","image":"SODA_7UP_soda_dispenser_soda_gun.png"},"3":{"id":"3","name":"Bitters","image":"BITTERS_blood_orange_bitters.png"},"4":{"id":"4","name":"Sugar","image":"GARNISH_SugarCube.png"}};
</script>
对于饮料的每种成分，图像上方都有两个下拉菜单。您可以在第一个下拉菜单中选择动作、瓶子、混合器或装饰物。当您选择其中一个类别时，它会使用存储在相应 mysql 表中的成分填充第二个下拉列表。
function configureDropDownLists(select1,select2,actions,bottles,mixers,garnishes) {
switch (select1.value) {
case 'action':
document.getElementById(select2).options.length = 1;
for (i = 1; i <= actions['num']; i++) {
createOption(document.getElementById(select2), actions[i]['name'], actions[i]['id'], actions[i]['image']);
}
break;
case 'bottle':
document.getElementById(select2).options.length = 1;
for (i = 1; i <= bottles['num']; i++) {
createOption(document.getElementById(select2), bottles[i]['name'], bottles[i]['id']), bottles[i]['image'];
}
break;
case 'mixer':
document.getElementById(select2).options.length = 1;
for (i = 1; i <= mixers['num']; i++) {
createOption(document.getElementById(select2), mixers[i]['name'], mixers[i]['id'], mixers[i]['image']);
}
break;
case 'garnish':
document.getElementById(select2).options.length = 1;
for (i = 1; i <= garnishes['num']; i++) {
createOption(document.getElementById(select2), garnishes[i]['name'], garnishes[i]['id'], garnishes[i]['image']);
}
break;
default:
document.getElementById(select2).options.length = 0;
break;
}
}
function createOption(select1, text, value, image) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
opt.myImage = image;
select1.options.add(opt);
}
那么下面...
<td>
<select id="step1" name='step1' onChange="configureDropDownLists(this,'step1_id',actions,bottles,mixers,garnishes)">
<option value="0">Choose category</option>
<option value="action">Action</option>
<option value="bottle">Bottle</option>
<option value="mixer">Mixer</option>
<option value="garnish">Garnish</option>
</select>
</td>
<td>
<select id='step2' name='step2' onChange="configureDropDownLists(this,'step2_id',actions,bottles,mixers,garnishes)">
<option value="0">Choose category</option>
<option value="action">Action</option>
<option value="bottle">Bottle</option>
<option value="mixer">Mixer</option>
<option value="garnish">Garnish</option>
</select>
</td>
然后我使用另一个 JavaScript 函数根据第二个下拉菜单中的成分选择来翻转图像。
这是我的功能：
function changePicture(selectbox,thisImage) {
var selection = document.getElementById(selectbox).selectedIndex; //grabs what user selected
var image = document.getElementById(selectbox).options[selection].myImage; //store image in variable
document.getElementById(thisImage).src = 'img/' + image; //change the image
}
那么下面...
<td>
<select id='step1_id' name='step1_id' onChange="changePicture('step1_id','step1_image')">
<option value='0'>Choose object</option>
</select>
</td>
<td>
<select id='step2_id' name='step2_id' onChange="changePicture('step2_id','step2_image')">
<option value='0'>Choose object</option>
</select>
</td>
</tr>
<tr>
<td>
<img id='step1_image' name='step1_image' src='img/Willsmallimage.jpg'>
</td>
<td>
<img id='step2_image' name='step2_image' src='img/Willsmallimage.jpg'>
</td>
</tr>
问题是，它适用于除瓶子之外的所有类别。我试过改变图像，但它只能在其他一张桌子上工作。永远不要在瓶子桌子上工作。在 FireBug 中，当我从该表中选择一种成分时，它表示该函数正在返回“img/undefined”。有任何想法吗？