防止神祕的字符串到數色彩數據轉換

Question

HTML：

<form method="post" action=""> 
     <select name="fancySelect" class="makeMeFancy"> 
      <option value="0" selected="selected" data-skip="1">Email Color Scheme</option> 
      <option value="81" data-color1="993300" data-color2="000000" data-html-text="Brown on Black">Brown on Black</option> 
      <option value="77" data-color1="663366" data-color2="000000" data-html-text="Purple on Black">Purple on Black</option> 
      <option value="129" data-color1="00ccff" data-color2="000000" data-html-text="Teal on Black">Teal on Black</option> 
      <option value="75" data-color1="666666" data-color2="000000" data-html-text="Dark Gray on Black">Dark Gray on Black</option> 
      <option value="85" data-color1="999999" data-color2="000000" data-html-text="Gray on Black">Gray on Black</option> 
      <option value="81" data-color1="993300" data-color2="000000" data-html-text="Brown on Black">Brown on Black</option> 
      <option value="77" data-color1="663366" data-color2="000000" data-html-text="Purple on Black">Purple on Black</option> 
      <option value="129" data-color1="00ccff" data-color2="000000" data-html-text="Teal on Black">Teal on Black</option> 
      <option value="75" data-color1="666666" data-color2="000000" data-html-text="Dark Gray on Black">Dark Gray on Black</option> 
      <option value="85" data-color1="999999" data-color2="000000" data-html-text="Gray on Black">Gray on Black</option> 
      <option value="81" data-color1="993300" data-color2="000000" data-html-text="Brown on Black">Brown on Black</option> 
      <option value="77" data-color1="663366" data-color2="000000" data-html-text="Purple on Black">Purple on Black</option> 
      <option value="129" data-color1="00ccff" data-color2="000000" data-html-text="Teal on Black">Teal on Black</option> 
      <option value="75" data-color1="666666" data-color2="000000" data-html-text="Dark Gray on Black">Dark Gray on Black</option> 
      <option value="85" data-color1="999999" data-color2="000000" data-html-text="Gray on Black">Gray on Black</option> 
     </select> 
    </form> 

的jQuery：

$(document).ready(function(){ 

    // The select element to be replaced: 
    var select = $('select.makeMeFancy'); 

    var selectBoxContainer = $('<div>',{ 
     width  : select.outerWidth(), 
     className : 'tzSelect', 
     html  : '<div class="selectBox"></div>' 
    }); 

    var dropDown = $('<ul>',{className:'dropDown'}); 
    var selectBox = selectBoxContainer.find('.selectBox'); 

    // Looping though the options of the original select element 

    select.find('option').each(function(i){ 
     var option = $(this); 

     if(i==select.attr('selectedIndex')){ 
      selectBox.html(option.text()); 
     } 

     // As of jQuery 1.4.3 we can access HTML5 
     // data attributes with the data() method. 

     if(option.data('skip')){ 
      return true; 
     } 


     // Creating a dropdown item according to the 
     // data-icon and data-html-text HTML5 attributes: 

     var li = $('<li>',{ 
      html: '<table border="0" cellspacing="3" cellpadding="3"><tr valign="middle"><td bgcolor="#'+option.data(String('color1'))+'" class="color">&nbsp;</td><td bgcolor="#'+option.data(String('color2'))+'" class="color">&nbsp;</td><td class="text"><span>'+option.data('html-text')+'</span></td></tr></table>' 
     }); 

     li.click(function(){ 
      selectBox.html("<div id='selected-colors'><div id='color-selection1' style='background:#"+ option.data(String('color1')) +";'></div><div id='color-selection2' style='background:#"+ option.data(String('color2')) +";'></div><span>"+option.data('html-text')+"</span>"); 
      dropDown.trigger('hide'); 

      // When a click occurs, we are also reflecting 
      // the change on the original select element: 
      select.val(option.val()); 

      return false; 
     }); 

     dropDown.append(li); 
    }); 

    selectBoxContainer.append(dropDown.hide()); 
    select.hide().after(selectBoxContainer); 

    // Binding custom show and hide events on the dropDown: 

    dropDown.bind('show',function(){ 

     if(dropDown.is(':animated')){ 
      return false; 
     } 

     selectBox.addClass('expanded'); 
     dropDown.slideDown(); 

    }).bind('hide',function(){ 

     if(dropDown.is(':animated')){ 
      return false; 
     } 

     selectBox.removeClass('expanded'); 
     dropDown.slideUp(); 

    }).bind('toggle',function(){ 
     if(selectBox.hasClass('expanded')){ 
      dropDown.trigger('hide'); 
     } 
     else dropDown.trigger('show'); 
    }); 

    selectBox.click(function(){ 
     dropDown.trigger('toggle'); 
     return false; 
    }); 

    // If we click anywhere on the page, while the 
    // dropdown is shown, it is going to be hidden: 

    $(document).click(function(){ 
     dropDown.trigger('hide'); 
    }); 
}); 

在下拉選項列表中向下，黑色數據彩-2顯示很好，但填充了'0'的bgcolor，而不是我在選項data-color2中的000000。我需要添加什麼代碼來強制data-color1和data-color2都是STRINGS而不是INTEGERS？

Answer 1

jQuery .data()方法故意轉換屬性內容。它認爲這對你有幫助，但經常（如你的情況），它不是。

您可以將「＃」添加到您的顏色屬性中。這會導致嘗試轉換爲數字失敗，並且最終會產生一個字符串。

或者，你可以使用一個單一屬性的兩種顏色，在JSON的文字形式：

<option value="81" data-colors='{ "color1": "993300", "color2": "000000" }' data-html-text="Brown on Black">Brown on Black</option> 

在JavaScript代碼，你會得到一個對象，是指顏色：

var colors = option.data("colors"); 

然後colors.color1和colors.color2將是正確的字符串，因爲你的JSON符號明確地描述它們。

編輯 —有見地的評論指出，當轉換的結果是一個數字，再一次字符串化的時候，是一樣的原始字符串的數字轉換隻是做。

再次編輯 — JSON需要有效，所以屬性名稱需要用雙引號引起來。我很抱歉。

Here is a working jsfiddle.