Question

我有一个通过JQuery创建的简单对象：

var userSettings = {
    firstName: "John",
    lastName: "Smith",
    username: "Jsmith"
};

HTML也非常简单：

<p>First Name <span id="firstName"></span></p>
<p>Last Name <span id="lastName"></span></p>
<p>Username <span id="username"></span></p>

我的问题是，如何编写一个支持向对象添加更多键/值的简单函数。对于此示例，该函数将仅使用正确的ID更新相应跨度的文本。

另外

对象的某些部分不一定会通过.text处理 - 有没有办法根据对象中定义的内容过滤/定义要使用的方法？例如，添加userColor：red将使用.css而不是.text。

JS Fiddle Link

编辑：更新了小提琴功能

Answer 1

可能是：

for (var key in userSettings) {
  if (userSettings.hasOwnProperty(key)) {
    $('#' + key).text(userSettings[key]);
  }
}

FIDDLE：https://jsfiddle.net/lmgonzalves/bce7ubqx/1/

修改

一种可能的解决方案（在对象中包含你的样式）：

var userSettings = { firstName: "John", lastName: "Smith", username: "Jsmith", styles: { color: "red", backgroundColor: "gray" } }; for (var key in userSettings) { if (userSettings.hasOwnProperty(key)) { if(key !== 'styles'){ $('#' + key).text(userSettings[key]); if (userSettings.hasOwnProperty('styles')) { var styles = userSettings['styles']; for (var k in styles) { if (styles.hasOwnProperty(k)) { $('#' + key).css(k, styles[k]); } } } } } }

FIDDLE：https://jsfiddle.net/lmgonzalves/bce7ubqx/5/

Answer 2

这将根据您的userSettings

更新范围文字

$(document).ready(function(){
    $.each(userSettings,function(k,v){
        if($('#'+k).length)
            $('#'+k).text(v);
    })
});

修改

如果要区分id和style，请在循环中添加标记

var userSettings = { firstName: "John", lastName: "Smith", username: "Jsmith", styles: { color: "red" } }; $(document).ready(function(){ $.each(userSettings,function(k,v){ if($('#'+k).length) { $('#'+k).text(v); } else if(k=='styles') { $('any_selector_here').css(userSettings.styles); } }) });

见工作Fiddle here

Answer 3

试试这个

function update(){
    $("#firstName").text(userSettings.firstName);
    $("#lastName").text(userSettings.lastName);
    $("#username").text(userSettings.username);
}

Answer 4

这很简单，可以在没有jQuery的情况下实现：

＆＃13;

var userSettings = {
    firstName: "John",
    lastName: "Smith",
    username: "Jsmith"
};

function setElementText(id, text) {
    document.getElementById(id).innerHTML = text;
}

window.addEventListener('load', function() {
    Object.keys(userSettings).forEach(function(key) {
        setElementText(key, userSettings[key]);
    });
});

＆＃13;

<p><strong>First Name</strong> <span id="firstName"></span></p>
<p><strong>Last Name</strong> <span id="lastName"></span></p>
<p><strong>Username</strong> <span id="username"></span></p>

＆＃13;

同样在JSFiddle

当然，如果您正在尝试学习jQuery，其他答案都是有效的。

Answer 5

将此添加到您的脚本

var count = 0;
   $.each(userSettings, function(i, value) {
   //alert(count);
      $("p span:eq("+count+")").attr("id", value)
      count++;    
});

您还可以在此技术中添加css属性。

http://jsfiddle.net/bce7ubqx/7/

从JQuery对象更新HTML文本

5 个答案: