與表單select元素替換的jQuery衝突問題

Question

我正在爲一個需要元素並替換它的自助服務終端項目選擇元素替換腳本，它與divs一起使用<options>。對於<select>和<select[multiple="multiple"]>元素，我有兩個版本 - '普通'和'模態'。彼此獨立，個人替代品按照他們應該的方式工作。當我將它們放在一個頁面上時，它們會在功能上崩潰。特別是，對於非模態<select>和非模態<select[multiple="multiple"]>，當單擊其各自的div.option時，不會切換類。我相信與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和刪除。之前添加的「已選」類。

順便說一句，如果你正在處理它，很難調試你的小提琴。在發佈小提琴時，請張貼您不會編輯的叉子網址。

更新

給一個人一條魚，他吃一天......授人以魚，他吃了一輩子。儘管您的小提琴正在改變，但我使用Google Chrome開發人員工具對此進行了調試。只需去你的小提琴，右鍵單擊，然後選擇檢查元素。點擊腳本標籤，然後從下拉菜單中選擇「顯示/」腳本。然後你可以點擊行號在javascript中設置斷點。回到Chrome，在結果窗格中執行一些操作，Chrome應該找到一個斷點。然後，您可以逐步執行操作，並逐行查看DOM如何受腳本影響。因爲Chrome沒有很好的Step Into功能（它進入了jquery源代碼），所以你需要在你的each（）和click（）函數中設置斷點。此外，使用雙監視器顯示器可以在這裏幫助LOT，這樣您就可以在一臺監視器上瀏覽調試器，同時在另一臺監視器中查看小提琴DOM結果。