0

Flexsider とスライドの 1 つのフォームで異常な問題が発生しています。フォームにはいくつかのラジオ ボタンがあり、コンテナーの div 以外には何もありません。ラジオボタンをクリックすると、ボタンの周りにカーソルの輪郭が表示されるため、応答していますが、チェックされません。プロパティを設定するためにjavascript呼び出しを使用してテストを試みました。ウォークスルーすると、ラジオボタンが正常に設定されましたが、機能を終了した後、ラジオボタンがリセットされました。ここや他の場所で議論されている同様の問題を見つけることができず、完全にびっくりしています。

フォームのコンテンツは ajax を介して読み込まれます。Flexslider が最初と最後のスライドのクローンを作成し、ajax コンテンツがスライドに読み込まれたときにクローンが更新されていることに気付きました。フォームのクローンがないようにスライドを並べ替えましたが、ラジオ ボタンをチェックすることはできませんでした。ただし、Firebug では、checked プロパティを true に設定し (Watch パネルで jquery を使用)、今度はボタンがチェックされたままになりました。チェック/チェックを外そうとしても効果がなく、Firebug で設定したプロパティのボタンが残りました。

編集：テキストフィールドを追加しましたが、問題なく機能しました。

以下はHTMLです。フォームのコンテンツを取得するための ajax リクエストにすぎないため、javascript は正直言って無視できます。使用している Javascript は、ビデオ用の jquery、flexslider、flowplayer です。フォームはデータ スライド 2 にあります。最初のスライドがクローンであるため、正式には 2 番目のスライドです。

<section class="slider">
    <div class="flexslider" id="mainSlider">

        <div class="flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="slides" style="width: 1000%; margin-left: -3486px;">
                <li data-slide="2" data-type="Quiz" data-id="6" class="clone" style="width: 1162px; float: left; display: block;">

                    <div class="quiz" data-id="1">
                        <div class="quizDescription">

                        </div>
                        <div class="quizContent" data-id="1">
                            <div style="max-width: " data-id="1" class="question">
                                <div class="questionText">Is TRUE true?<br></div>
                                    <span id="CourseQuizAnswer"><input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2"> 
                                        <label for="CourseQuizAnswer_0" style="display:inline">True</label><br>
                                        <input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_1" value="3">
                                        <label for="CourseQuizAnswer_1" style="display:inline">False</label>
                                    </span>
                                </div>
                            </div>
                        <div class="well">
                            <input type="button" value="Submit" name="yt0" onclick="submitQuestionAnswer(this);" class="btn btn-primary btn-med">
                        </div>
                    </div>

                </li>
                <li data-slide="0" data-type="Video" data-id="2" style="width: 1162px; float: left; display: block;" class="">

                    <div class="minimalist video-slide flowplayer is-mouseout is-ready is-paused" data-video_id="1" id="mainPlayer">
                        <video tabindex="0" class="fp-engine">
                            <source src="http://stream.flowplayer.org/bauhaus/624x260.webm" type="video/webm"></source>
                        </video>
                        <div class="fp-ratio" style="padding-top: 56.25%;"></div>      <div class="fp-ui">         <div class="fp-waiting"><em></em><em></em><em></em></div>         <a class="fp-fullscreen"></a>         <a class="fp-unload"></a>         <p class="fp-speed"></p>         <div class="fp-controls">            <a class="fp-play"></a>            <div class="fp-timeline" style="">               <div class="fp-buffer" style="width: 100%;"></div>               <div class="fp-progress"></div>            </div>            <div class="fp-volume">               <a class="fp-mute"></a>               <div class="fp-volumeslider" style="">                  <div class="fp-volumelevel" style="width: 43%;"></div>               </div>            </div>         </div>         <div class="fp-time">            <em class="fp-elapsed">00:00</em>            <em class="fp-remaining">00:40</em>            <em class="fp-duration">00:40</em>         </div>         <div class="fp-message"><h2></h2><p></p></div>      </div><a href="http://flowplayer.org" target="_top"></a></div>
                </li>
                <li data-slide="1" data-type="Content" data-id="5" style="width: 1162px; float: left; display: block;">
                    Segment 2            
                </li>
                <li data-slide="2" data-type="Quiz" data-id="6" class="flex-active-slide" style="width: 1162px; float: left; display: block;">
                    <div class="quiz" data-id="1">
                        <div class="quizDescription">

                        </div>
                        <div class="quizContent" data-id="1">
                            <div style="max-width: " data-id="1" class="question">
                                <div class="questionText">
                                    Is TRUE true?<br>
                                </div>
                                <span id="CourseQuizAnswer">
                                    <input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2"> 
                                    <label for="CourseQuizAnswer_0" style="display:inline">True</label><br>
                                    <input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_1" value="3"> 
                                    <label for="CourseQuizAnswer_1" style="display:inline">False</label>
                                    </span>
                                </div>
                            </div>
                        <div class="well">
                            <input type="button" value="Submit" name="yt0" onclick="submitQuestionAnswer(this);" class="btn btn-primary btn-med">
                        </div>
                    </div>

                </li>
                <li data-slide="0" data-type="Video" data-id="2" style="width: 1162px; float: left; display: block;" class="clone">

                    <div class="minimalist video-slide" data-video_id="1" id="mainPlayer">
                        <video tabindex="0">
                            <source src="http://stream.flowplayer.org/bauhaus/624x260.webm" type="video/webm"></source>
                        </video>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>

誰にも洞察力がありますか？前もって感謝します！

4

2 に答える 2

0

idラジオ ボタンのが重複しています。重複するids を削除して、再試行してください。それでも機能しない場合はお知らせください。

例えば：

<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2">

と同じです

<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2">

ページに 2 回存在します。

あなたがあなたの がユニークだと思った理由を私は知っていますid: それらが関係する質問のためにそれらをユニークにしました. ただし、ページ上で一意にするのを忘れていました。問題は、id宣言されている場所に関係なく、s がすべてグローバル ページ スコープ内にあることです。

幸運を！:)

于 2013-04-12T19:16:27.040 に答える
0

flexslider は、各スライドのミラー コピーを作成して、最後のスライドをスクロールしたときに連続しているように見せます。これらは「clone」というクラス名で作成されます。jQueryを使用して送信する前に、フォームを無効にすることができます:

$(".clone input").prop("disabled", true);
于 2016-06-21T11:05:32.610 に答える