Javascript 从JQuery对象更新HTML文本

我通过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

编辑：更新了Fiddle with函数

试试这个

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

试试这个

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

可以是：

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

小提琴：

编辑：

可能的解决方案（在对象中包括样式）：

小提琴：

可以是：

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

小提琴：

编辑：

可能的解决方案（在对象中包括样式）：

---

FIDDLE:

这将根据您的

用户设置更新span文本

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

---

请参阅“工作”

这将根据您的

用户设置更新span文本

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

请参阅工作
这非常简单，完全不需要jQuery即可实现：


var用户设置={
名字：“约翰”，
姓：“史密斯”，
用户名：“Jsmith”
};
函数setElementText（id，文本）{
document.getElementById（id）.innerHTML=text；
}
addEventListener（'load'，function（））{
Object.key（userSettings）.forEach（function（key）{
setElementText（key，userSettings[key]）；
});
});
名字

姓氏

用户名
这非常简单，完全不需要jQuery即可实现：


var用户设置={
名字：“约翰”，
姓：“史密斯”，
用户名：“Jsmith”
};
函数setElementText（id，文本）{
document.getElementById（id）.innerHTML=text；
}
addEventListener（'load'，function（））{
Object.key（userSettings）.forEach（function（key）{
setElementText（key，userSettings[key]）；
});
});
名字

姓氏

用户名
将其添加到脚本中

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

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

将此添加到脚本中

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

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

1。此代码不起任何作用。它应该做什么，你试过什么？2.这与jQuery无关（至少到目前为止）哦，哎哟-我忘了包括我的函数-我不知道如何处理压缩它，以便更有效地运行对象的更多部分。请同时更新问题。将所有相关信息都包含在问题本身中是有帮助的。为此，您需要链接jQuery。也许我解释错了，但我的观点是某些键/值将使用不同的方法。因此，某些键/值将使用.css1，而不是使用.text。此代码不起任何作用。它应该做什么，你试过什么？2.这与jQuery无关（至少到目前为止）哦，哎哟-我忘了包括我的函数-我不知道如何处理压缩它，以便更有效地运行对象的更多部分。请同时更新问题。将所有相关信息都包含在问题本身中是有帮助的。为此，您需要链接jQuery。也许我解释错了，但我的观点是某些键/值将使用不同的方法。因此，与使用.text相比，某些键/值将使用.cssIf。如果对象包含的设置不会通过.text更新，是否有方法在循环中区分这些设置？例如，在对象中添加userColor:red，但希望此对象使用.css方法运行，我如何根据该方法编辑循环？如果对象包含无法通过.text更新的设置，是否有方法在循环中区分这些设置？例如，在对象中添加userColor:red，但希望此对象使用.css方法运行，我如何才能基于此编辑循环？谢谢。不确定您是否看到了我最近的编辑，关于处理.text以外的内容（或使用JS setElementText）。这就是我喜欢使用jQuery的原因。使用像.css这样的东西会非常有帮助。这可以根据您的需要精心设计。。。userSettings对象可以保存内部对象，而不仅仅是字符串。使用此数据将值引导到适当的HTML部分（内容、类、样式…）谢谢。不确定您是否看到了我最近的编辑，关于处理.text以外的内容（或使用JS setElementText）。这就是我喜欢使用jQuery的原因。使用像.css这样的东西会非常有帮助。这可以根据您的需要精心设计。。。userSettings对象可以保存内部对象，而不仅仅是字符串。使用此数据将值定向到适当的HTML部分（内容、类、样式…）