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

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');
    });
});

在选项列表的下拉列表中,data-color-2中的BLACK显示正常,但是填充了bgcolor为'0'而不是我在选项data-color2中的000000.我需要添加什么来强制BOTH 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需要有效,因此属性名称必须是双引号.我很抱歉.

这是一个工作的jsfiddle.