0

要するに、同じ 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>

ドリンクの材料ごとに、画像の上に 2 つのドロップダウン メニューがあります。最初のドロップダウンでは、アクション、ボトル、ミキサー、またはガーニッシュを選択できます。これらのカテゴリのいずれかを選択すると、2 番目のドロップダウンに、それぞれの 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 関数を使用して、2 番目のドロップダウン メニューから選択した材料に基づいて画像を反転します。

これが私の機能です：

    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>

問題は、ボトル以外のすべてのカテゴリで完全に機能することです。画像を変更しようとしましたが、他のテーブルの 1 つでしか機能しません。ボトルテーブルでは機能しません。FireBug では、そのテーブルから成分を選択すると、関数が「img/undefined」を返していると表示されます。何か案は？

4

1 に答える 1

0

に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これにより、問題のあるコード行に移動できますが、それでも微妙なエラーが表示されます。

于 2013-09-18T16:20:48.323 に答える