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中的BLACK显示正常，但填充了bgcolor的＆＃39; 0＆＃39;而不是我在选项data-color2中的000000。我需要添加什么来强制BOTH data-color1和data-color2都是STRINGS而不是INTEGERS？

Answer 1

jQuery .data()方法有意转换属性内容。它认为它帮了你一个忙，但经常（如你的情况）它不是。

您可以添加＆＃34;＃＆＃34;你的颜色属性。这导致尝试转换为失败的数字，并且您最终会得到一个字符串。

或者，您可以使用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.

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

1 个答案: