防止神秘的字符串到数色彩数据转换

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.