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

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> 

Hi guys, kinda off my coding game here so I need some help. I'm building my portfolio website and the page in which will display my past projects will be full screen. I've stored information in objects with the same name with the exception of the number at the end. There is also an variable index, my goal was change the content of my portfolio page by clicking on an arrow which will start a function to change the content, but I can't seem to get pass making the content show up period. I hope I'm making sense here, if not I will be happy to clarify further.

How can I use a variable(numeric) as apart of an object name to access that objects properties.

Answer 1

According to the Zach-M and ASDFGerte suggestions, use an Array instead an object and get your profile settings with an index.

In this solution, every property is written in the doc, not just two.

Notice the correspondence between the ID properties in the HTML tag and the property names in the profiles. It's for readability and convenience.

 (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

You could use eval to evaluate your object's name and access it that way, but doing so is seriously NOT recommended .

As mentioned by Zach M. and ASDFGerte , using an Array is definitely the way to go here.

Functional example:

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

 .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></h1> <h2 id="role">Role in Project <br /> Client</h2> <h2>Description</h2> <p> Some Content inserted with PHP</p> </div>