Question

var showcaseIndex = 1;
var showcaseItem1 = {
                    projectTitle: "Adrian's Caterers", 
                    projectRole: "Web Designer & Developer <br />", 
                    rojectClient: "Catering Business Owner", 
                    projectDescription: ""
                };

var showcaseItem2 = {
                    projectTitle: "Inspiring",
                    projectRole: "Web Designer & Developer",
                    projectClient: "Medical Trasnport Start-up",
                    projectDescription: ""
                    };
  
$('.showcase-content h1').html(showcaseItem[showcaseIndex].projectTitle);
$('.showcase-content #role').html(showcaseItem[showcaseIndex].projectRole);

.showcase-content {
    width: 500px;
    height: 70vh;
    background: rgba(255,255,255,1);
    float: left;
    box-sizing: border-box;
    padding: 20px;
}
.showcase-content h1, h2, p {
    color: #4e4e4e;
    text-align: left;
    margin: 0;
    font-family: 'quicksandregular', sans-serif;
    margin-bottom: 10px; 
}

<div class="showcase-content">
  <h1></h1>
  <h2 id="role">Role in Project <br /> Client</h2>
  <h2>Description</h2>
  <p> Some Content inserted with PHP</p>
</div>

嗨，大家好，我的编码游戏在这里，所以我需要一些帮助。我正在构建我的投资组合网站，其中将显示我过去的项目的页面将全屏显示。我将信息存储在具有相同名称的对象中，但最后的数字除外。还有一个变量索引，我的目标是通过点击箭头来改变我的投资组合页面的内容，这将启动一个功能来改变内容，但我似乎无法通过使内容显示期间。我希望我在这里有意义，如果不是，我会很乐意进一步澄清。

如何使用变量（数字）作为对象名称的一部分来访问该对象属性。

Answer 1

根据Zach-M和ASDFGerte建议，使用数组代替对象，并使用索引获取配置文件设置。

在此解决方案中，每个属性都写在doc中，而不仅仅是两个。

请注意HTML标记中的ID属性与配置文件中的属性名称之间的对应关系。这是为了方便阅读和便利。

(function () {
    "use strict";
    $(document).ready(function () {
        var showCaseIndex = 1; // so the second one
        
        let showcase = [
          {
                projectTitle:       "Adrian's Caterers"
              , projectRole:        "Web Designer & Developer"
              , projectClient:      "Catering Business Owner"
              , projectDescription: ""
          },
          {
                projectTitle:       "Inspiring"
              , projectRole:        "Web Designer & Developer"
              , projectClient:      "Medical Transport Start-up" // <- typo here "trasnport"
              , projectDescription: ""
         }
        ]
      
        for(var prop in showcase[showCaseIndex])
        {
          $(".showcase-content #"+prop).html(showcase[showCaseIndex][prop]);
        }
    });
}());

     .showcase-content {
          width: 500px;
          height: 70vh;
          background: rgba(255,255,255,1);
          float: left;
          box-sizing: border-box;
          padding: 20px;
      }
      .showcase-content h1, h2, p {
          color: #4e4e4e;
          text-align: left;
          margin: 0;
          font-family: 'quicksandregular', sans-serif;
          margin-bottom: 10px; 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showcase-content">
  <h1 id="projectTitle"></h1>
  <h2 id="projectRole">Role in Project <br /> Client</h2>
  <p id="projectClient"></p>
  <h2 id="projectDescription">Description</h2>
  <p id="projectDescription"></p>
  <p> Some Content inserted with PHP</p>
</div>

Answer 2

您可以使用eval评估对象的名称并以此方式访问它，但这样做 is seriously NOT recommended 。

正如Zach M.和ASDFGerte所提到的，使用Array绝对是走到这里的方式。

功能范例：

＆＃13;

(function () {
    "use strict";
    $(document).ready(function () {
        var showcase = [];
        var showcaseIndex = 1;
        
        showcase.push({
            projectTitle: "Adrian's Caterers", 
            projectRole: "Web Designer & Developer <br />", // <-- <br /> here seems out of place...
            rojectClient: "Catering Business Owner", 
            projectDescription: ""
        });

        showcase.push({
            projectTitle: "Inspiring",
            projectRole: "Web Designer & Developer",
            projectClient: "Medical Trasnport Start-up",
            projectDescription: ""
        });
          
        $('.showcase-content h1').html(showcase[showcaseIndex].projectTitle);
        $('.showcase-content #role').html(showcase[showcaseIndex].projectRole);
    });
}());

＆＃13;

.showcase-content {
    width: 500px;
    height: 70vh;
    background: rgba(255,255,255,1);
    float: left;
    box-sizing: border-box;
    padding: 20px;
}
.showcase-content h1, h2, p {
    color: #4e4e4e;
    text-align: left;
    margin: 0;
    font-family: 'quicksandregular', sans-serif;
    margin-bottom: 10px; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showcase-content">
  <h1></h1>
  <h2 id="role">Role in Project <br /> Client</h2>
  <h2>Description</h2>
  <p> Some Content inserted with PHP</p>
</div>

＆＃13;

访问对象的属性时，如何在对象名中使用数值变量

2 个答案: