RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 945395
Accepted
Новиков Максим
Новиков Максим
Asked:2020-02-16 07:25:34 +0000 UTC2020-02-16 07:25:34 +0000 UTC 2020-02-16 07:25:34 +0000 UTC

js对象中的连接

  • 772

给定以下代码

var cities = {
    barcelona: {
        name: "Barcelona",
        color: "#F75C03",
        image: "barcelona.jpeg",
        description: `
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
            Nisl pretium fusce id velit. Tellus mauris a diam maecenas sed enim ut sem.
            Auctor urna nunc id cursus metus aliquam eleifend. Habitasse platea dictumst quisque sagittis purus.
            Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit.
            Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris.
            Ipsum nunc aliquet bibendum enim. Id neque aliquam vestibulum morbi.
            Vitae purus faucibus ornare suspendisse sed nisi lacus sed.
            Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus.
        `
    },
    paris: {
        name: "Paris",
        color: "#73D8F4",
        image: "paris.jpeg",
        description: `
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Quam pellentesque nec nam aliquam. Sagittis vitae et leo duis ut diam quam nulla.
            Commodo elit at imperdiet dui accumsan sit.
            Ac ut consequat semper viverra. At erat pellentesque adipiscing commodo elit at imperdiet dui.
            Faucibus nisl tincidunt eget nullam non nisi est. Condimentum lacinia quis vel eros.
            Nullam eget felis eget nunc. Dictum at tempor commodo ullamcorper a lacus vestibulum.
            Ornare suspendisse sed nisi lacus. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit.
            Id diam vel quam elementum pulvinar etiam non quam. Sed libero enim sed faucibus turpis in eu.
            Tempor commodo ullamcorper a lacus vestibulum sed arcu non.
        `
    },
    rome: {
        name: "Rome",
        color: "#8E001C",
        image: "rome.jpeg",
        description: `
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Orci porta non pulvinar neque laoreet suspendisse interdum consectetur.
            Enim nec dui nunc mattis.
            Dictumst quisque sagittis purus sit amet volutpat consequat.
            Tortor vitae purus faucibus ornare suspendisse sed nisi lacus.
            Turpis cursus in hac habitasse platea dictumst quisque sagittis.
            Et ligula ullamcorper malesuada proin. Donec massa sapien faucibus et.
            Sapien pellentesque habitant morbi tristique. A diam sollicitudin tempor id eu nisl.
            Proin sagittis nisl rhoncus mattis rhoncus. Mauris a diam maecenas sed enim ut.
            Sed elementum tempus egestas sed sed risus.
            Auctor augue mauris augue neque gravida in fermentum et sollicitudin.
        `
    },
    london: {
        name: "London",
        color: "#1F487E",
        image: "london.jpeg",
        description: `
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Id porta nibh venenatis cras sed felis eget velit aliquet.
            Aliquam ultrices sagittis orci a scelerisque purus.
            Mauris pharetra et ultrices neque ornare aenean euismod elementum.
            Commodo nulla facilisi nullam vehicula ipsum a arcu.
            Volutpat ac tincidunt vitae semper quis lectus nulla. Purus in massa tempor nec feugiat.
            Ac ut consequat semper viverra nam libero. At urna condimentum mattis pellentesque id nibh.
            Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum.
            Lectus nulla at volutpat diam ut venenatis tellus in. Integer feugiat scelerisque varius morbi.
            A lacus vestibulum sed arcu.
        `
    },
}

var header = document.querySelector("h1");
var main = document.querySelector(".main");
var img = document.querySelector("img");
var txt = document.querySelector("p");

header.textContent = cities.barcelona.name;
main.style.backgroundColor = cities.barcelona.color;
img.src = `img/${cities.barcelona.image}`;
txt.textContent = cities.barcelona.description;

如何使它在调用函数和传递参数时,程序以相同的方式工作?

function placeData( city ) {

    header.textContent = toString(cities.city.name);
    main.style.backgroundColor = cities.city.color;
    img.src = `img/${cities.city.image}`;
    txt.textContent = cities.city.description;

}

placeData("rome");
javascript
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    vsemozhebuty
    2020-02-16T08:24:49Z2020-02-16T08:24:49Z

    如果我正确理解了这个问题,您需要使用该字段而不是通过点,而是在方括号中,然后动态替换变量的值,而不是使用文字字符串:

    function placeData( city ) {
    
        header.textContent = cities[city].name;
        main.style.backgroundColor = cities[city].color;
        img.src = `img/${cities[city].image}`;
        txt.textContent = cities[city].description;
    
    }
    
    placeData("rome");
    
    

    您还可以通过缓存一个级别来节省一点速度:

    function placeData( city ) {
        const cityData = cities[city];
    
        header.textContent = cityData.name;
        main.style.backgroundColor = cityData.color;
        img.src = `img/${cityData.image}`;
        txt.textContent = cityData.description;
    
    }
    
    placeData("rome");
    
    • 1

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    根据浏览器窗口的大小调整背景图案的大小

    • 2 个回答
  • Marko Smith

    理解for循环的执行逻辑

    • 1 个回答
  • Marko Smith

    复制动态数组时出错(C++)

    • 1 个回答
  • Marko Smith

    Or and If,elif,else 构造[重复]

    • 1 个回答
  • Marko Smith

    如何构建支持 x64 的 APK

    • 1 个回答
  • Marko Smith

    如何使按钮的输入宽度?

    • 2 个回答
  • Marko Smith

    如何显示对象变量的名称?

    • 3 个回答
  • Marko Smith

    如何循环一个函数?

    • 1 个回答
  • Marko Smith

    LOWORD 宏有什么作用?

    • 2 个回答
  • Marko Smith

    从字符串的开头删除直到并包括一个字符

    • 2 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5