jquery - Jquery ヘルプ: slickquiz での画像の動作の呼び出し (カスタマイズ)

Question

私は自分のプロジェクトの 1 つで slickquiz を試し、すべての質問に画像とすべてを追加しました。

ただし、次の質問に進む前に画像を遅らせる方法を教えていただければ助かります。

Id が既に変更されているため、[回答の確認] をクリックするたびに、次の回答に自動的に切り替わります。

私が望んでいたのは、次の質問が読み込まれたときにのみ画像を変更することです。

完全なコードは次の場所にあります: http://bin.cakephp.org/saved/87152

ライブサンプル: http://aacenter.com/surveys/index/1

画像の変更を行うコード スニペット:

if (qPos == 'question0') {
                    //console.log('search: ' + qPos + ', found.');
                    $('#progressbar').progressbar('option', 'value', 10);
                    $('.questionImage #qImgSrc').attr('src', '/themed/aac-theme/img/quizzes/s' + surveyId + 'q02.jpg');
                }
                else if (qPos == 'question1') {
                    //onsole.log('search: ' + qPos + ', found.');
                    $('#progressbar').progressbar('option', 'value', 20);
                    $('.questionImage #qImgSrc').attr('src', '/themed/aac-theme/img/quizzes/s' + surveyId + 'q03.jpg');
                }

コードは正常に機能していますが、画像を変更するのはまだ先のことです。

Answer 1

修正に取り組むことができました。クリックごとの動作に依存する代わりに。slickquiz は事前に < li > をロードして、表示と非表示を切り替えただけです。最初に、適切な画像もロードする必要があります。

修正は非常に簡単でした。

questionHTML.append('<div class="questionImage"><img id="qImgSrc" src="/themed/aac-theme/img/quizzes/s' +surveyId+ 'q0' + count + '.jpg" border="0" width="300" height="120" alt="" />' + '</div>');

このコードが必要な場合は、jquery ui プログレス バーも表示されるように変更されています。

楽しみ！

Answer 2

'questionHTML.append('' + '');'