フォーム選択要素の置換でjQueryの競合の問題

Question

私は要素を取り、それを置き換えるキオスクプロジェクトのための選択要素の置換スクリプトに取り組んでいます。それは<options>とdivsです。私は<select>と<select[multiple="multiple"]>の両方の要素に対して、「標準」と「モーダル」の2つのバージョンがあります。互いに独立して、個々の置換は必要に応じて機能します。私はそれらをすべてページに置くと機能的に壊れます。特に、非モーダルの<select>と非モーダルの両方の場合、<select[multiple="multiple"]>は、それぞれのボタンをクリックしたときにトグルクラスではありません。私は問題を引き起こしているjQueryと何らかの矛盾があると信じていますが、私はそれを理解するにはあまりにも多くの初心者です。

私のコードでは、多くの変数と、htmlを追加するインスタンスが気付くでしょう。このスクリプトの目的は、簡単なタグを生成し、変更できないフォームビルダによって生成されるフォーム要素を置き換えることです。

私はここに私のコードを含めました：http://jsfiddle.net/zumwalt/52At7/

すべてのヘルプは大歓迎です！ここで

Answer 1

は何が起こっているかである。

$('div.select-normal div.option-'+value+'').click(function() { 
    option.prop("selected", "selected"); 
    $('div.select-normal div.option').removeClass('selected'); 
    $(this).toggleClass('selected'); 
}); 

上記のコードは、多くの選択通常のために実行すると、CSSクラスが正しく適用されています。しかし、あなたが持っている、後にモーダルため、このコードは、多くの選択：

$('div.option').click(function() { 
    var value = $(this).attr('id'); 
    var option = $('option[value=' + value + ']'); 
    var optiontext = $(this).text(); 

    option.prop("selected", !option.prop("selected")); 
    $(this).toggleClass('selected'); // HERE IS THE ERROR 
    if ($(this).hasClass('selected')) { 
     $('ul.multiselect-dropdown-options') 
      .append('<li id="' + value 
       + '" class="dropdown-option drop-down-option-' 
       + value + '">' + optiontext 
       + '<a class="remove-option">x</a></li>'); 
    } else { 
     $('.drop-down-option-' + value).fadeOut().remove(); 
    } 
}); 

ノーマルをクリックするので、多くはまた、$（「div.option」）をトリガーするを選択し、それがtoggleClassを実行すると削除されます）（クリックしてください。前に追加された「選択された」クラス。

ところで、あなたがそれに取り組んでいるなら、あなたのフィドルをデバッグすることは非常に難しいです。 SOに投稿するときは、編集しないフォークURLを投稿してください。

更新

人に魚を与えれば、彼はその日のために食べる...魚に男を教えると、彼は生涯のために食べます。あなたのフィドルが変化していたにもかかわらず、Google Chromeデベロッパーツールを使用してこれをデバッグしました。あなたのフィドルに行き、右クリックして、「要素を検査」を選択してください。 [Scripts]タブをクリックし、ドロップダウンから[show /]スクリプトを選択します。行番号をクリックすると、JavaScriptのブレークポイントを設定できます。 Chromeに戻って、結果ウィンドウで何かを実行すると、Chromeがブレークポイントに到達するはずです。次に、アクションをステップ実行して、DOMがスクリプトによってどのように影響を受けるかを行単位で確認することができます。

それぞれの（）とclick（）関数の中にブレークポイントを設定する必要があります。これは、Chromeが非常に優れたステップイン機能を持たないためです（jqueryソースに入ります）。また、2モニターディスプレイを使用すると、ここでは手間がかからず、1つのモニターでデバッガーを実行しながら、別のモニターでFiddle DOM結果を表示できます。