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

HTML:

电子邮件配色方案
棕色加黑色
黑上紫
青绿色
黑底灰
灰对黑
棕色加黑色
黑上紫
青绿色
黑底灰
灰对黑
棕色加黑色
黑上紫
青绿色
黑底灰
灰对黑

jQUERY：

<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>

$（文档）.ready（函数（）{
//选择要替换的图元：
var select=$（'select.makeMeFancy'）；
变量selectBoxContainer=$（“”{
宽度：选择.outerWidth（），
类名：“tzSelect”，
html:'
});
var dropDown=$（“
”，{className:'dropDown}）；
var selectBox=selectBoxContainer.find（'.selectBox'）；
//在原始select元素的选项之间循环
select.find（'option'）。每个（函数（i）{
var选项=$（此选项）；
如果（i==select.attr（'selectedIndex'））{
selectBox.html（option.text（））；
}
//从jQuery1.4.3开始，我们可以访问HTML5
//使用data（）方法创建数据属性。
if（option.data（'skip'））{
返回true；
}
//根据
//数据图标和数据html文本HTML5属性：
变量li=$（“
”{
html:''+选项.数据（'html-text'）+''的
});
li.单击（函数（）{
selectBox.html（“+option.data（'html-text'）+”）；
触发器（'hide'）；
//当点击发生时，我们也在反思
//原始选择元素上的更改：
选择.val（option.val（））；
返回false；
});
下拉。追加（li）；
});
选择boxContainer.append（dropDown.hide（））；
选择.hide（）.after（selectBoxContainer）；
//在下拉列表中绑定自定义显示和隐藏事件：
dropDown.bind（'show'，function（）{
if（dropDown.is（':animated'））{
返回false；
}
selectBox.addClass（'expanded'）；
dropDown.slideDown（）；
}).bind（'hide'，function（）{
if（dropDown.is（':animated'））{
返回false；
}
selectBox.removeClass（'expanded'）；
dropDown.slideUp（）；
}).bind（'toggle'，function（）{
if（selectBox.hasClass（'expanded'））{
触发器（'hide'）；
}
else下拉列表。触发器（'show'）；
});
选择框。单击（函数（）{
触发器（'toggle'）；
返回false；
});
//如果我们单击页面上的任意位置
//下拉列表显示，它将被隐藏：
$（文档）。单击（函数（）{
触发器（'hide'）；
});
});

在选项列表的下拉列表中，data-color-2中的黑色显示良好，但填充了bgcolor“0”，而不是选项data-color2中的000000。我需要向代码中添加什么来强制data-color1和data-color2都是字符串而不是整数？

jQuery

.data（）

方法有意地转换属性内容。它认为这是在帮你的忙，但通常（就像你的情况一样）不是这样

您可以在颜色属性中添加“#”。这会导致转换为数字的尝试失败，最终会得到一个字符串

或者，您可以为两种颜色使用一个单独的属性，以JSON文本的形式：

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

然后

colors.color1

和

colors.color2

将是正确的字符串，因为JSON符号明确地描述了它们

编辑-一条有见地的评论指出，只有当转换的结果是一个数字，当再次字符串化时，该数字与原始字符串相同时，才会进行数字转换

再次编辑-JSON必须有效，因此属性名必须使用双引号。我道歉

---

您应该发布所涉及的实际代码。您可以发布关于如何设置这些数据属性的相关代码吗？修改问题以包括实际代码，可能？

data（）

不会将

“000000”

更改为

0

。从中可以看出：“[…]”1E02“和“100.000”等同于数字（数值100），但转换它们会改变它们的表示形式，使它们保留为字符串。“它将

“993300”

解析为一个整数。。。但这不应该影响字符串连接@佳能啊，是的，看起来只有当结果重新字符串化为相同的字符串时，它才会进行数字转换。在这种特殊情况下，我想我仍然会使用一些更明确和可预测的方法来避免这种细节，但我有点规避风险。我当然同意您使用JSON。我只是指出了关于转化的那一点。我完全不喜欢

data（）

方法：/@Pointy我已经实现了上面的示例，但是我可以，但是当我把colors.color1放在where option.data（String（'color1'））中时，我得到的都是未定义的。我应该将colors.color1或colors.color2包装在任何东西中吗？@Murphy1976您必须确保获取对象，

var colors=option.data（“colors”）-我将处理JSFIDLE实现。
 <option value="81" data-colors='{ "color1": "993300", "color2": "000000" }' data-html-text="Brown on Black">Brown on Black</option>

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