Question

简而言之：我使用相同的JS函数来旋转可能来自多个类别的图像，并且它适用于除1之外的所有类别。我完全被难倒。

详细信息：我正在编写一个javascript应用程序来制作鸡尾酒食谱。食谱的成分通过php / mysql引入javascript。我在JavaScript＆amp;中测试了这些变量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'。任何想法？

Answer 1

在configureDropDownLists()中，你有一个错字（错误的结束语）。改变这一行：

createOption(document.getElementById(select2), bottles[i]['name'], bottles[i]['id']), bottles[i]['image'];

到此：

createOption(document.getElementById(select2), bottles[i]['name'], bottles[i]['id'], bottles[i]['image']);

这个拼写错误的结果是图像没有传递给createOption，因此总是未定义。

将来，在createOption()中设置断点并观察其创建选项的方式会在创建瓶子选项时看到图像始终为undefined。这会引导你找到错误的代码行 - 尽管它仍然是一个微妙的错误。

图像名称返回为未定义，但仅适用于某些

1 个答案: