如何为每个对象实例创建一个新变量

时间：2019-01-23 09:17:37

标签： javascript oop

我已经构建了一个脚本，可以为每个网格项目创建一个新的“ gridItem”对象实例。问题是，每个新的网格项都不会声明新变量，而是会覆盖'obj'变量。我宁愿为每个对象实例声明一个新变量，例如obj1，obj2等。

我试图通过使用如下计数变量来做到这一点：

obj + 'id' = new gridItem(title, id); // hoped for obj1, obj2, etc

但这失败了。有谁知道该怎么做，以及这样做的最好方法？感谢您的帮助。

Codepen：https://codepen.io/anon/pen/ebKXGQ 

let gridItems = document.querySelectorAll('.grid-item'), id = 0, objects = [];

for (let item of gridItems) {
	id++;
	var title = item.querySelector('.grid-text-content h2').textContent,
	    obj = new gridItem(title, id);

	objects.push(obj);
}

function gridItem(title, id) {
	this.title = title;
	this.id = id;
}

document.getElementsByTagName('p')[0].textContent = 'obj variable: ' + JSON.stringify(obj, null) + ' - I want to be able to use obj1, obj2, obj3 and obj4';
/* Grid Test */
.grid-nick {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 100%;
    grid-column-gap: 2%;
    background: lightblue;
}
.grid-item, .grid-text-content {
    background: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
}
.grid-text-content {
    padding: 10px;
}
.grid-item img { width: 100% }
.grid-item h2 {
    margin-bottom: 0;
}
.grid-item .grid-text.price {
    padding: 20px 0;
    font-size: 2em;
}
.grid-item .grid-text .description {}
.grid-item .grid-btn {}
<div class='grid-nick'>
  
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
        <h2>Header Here</h2>
        <span class='grid-text price'>$81.52</span>
        <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
        <button class='grid-btn cart'>Add to Cart</button>
    </div>
</div>
  
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
        <h2>Another Header Here</h2>
        <span class='grid-text price'>$81.52</span>
        <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
        <button class='grid-btn cart'>Add to Cart</button>
    </div>
</div>
  
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
        <h2>And This Here</h2>
        <span class='grid-text price'>$81.52</span>
        <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
        <button class='grid-btn cart'>Add to Cart</button>
    </div>
</div>
  
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
        <h2>Last Header</h2>
        <span class='grid-text price'>$81.52</span>
        <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
        <button class='grid-btn cart'>Add to Cart</button>
    </div>
</div>
  
</div>

<p>changes</p>

1 个答案:

答案 0 :(得分：0)

function getGridItemTitle(item) {
  return item.querySelector('.grid-text-content h2').textContent;
}

function gridItem(title, id) {
  this.title = title;
  this.id = id;
}

function toObject(item, index) {
  return new gridItem(getGridItemTitle(item), index)
}

const gridItems = document.querySelectorAll('.grid-item');
const objects = [...gridItems].map(toObject);

function updateChanges(i) {
  const json = JSON.stringify(objects[i], null);
  const p = document.getElementById('changes');
  
  p.textContent = `obj${i} variable: ${json}`;
}

updateChanges(0)
/* Grid Test */

.grid-nick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  grid-column-gap: 2%;
  background: lightblue;
}

.grid-item,
.grid-text-content {
  background: yellow;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1em;
}

.grid-text-content {
  padding: 10px;
}

.grid-item img {
  width: 100%
}

.grid-item h2 {
  margin-bottom: 0;
}

.grid-item .grid-text.price {
  padding: 20px 0;
  font-size: 2em;
}

.grid-item .grid-text .description {}

.grid-item .grid-btn {}
<div class='grid-nick'>
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
      <h2>Header Here</h2>
      <span class='grid-text price'>$81.52</span>
      <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
      <button class='grid-btn cart'>Add to Cart</button>
    </div>
  </div>

  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
      <h2>Another Header Here</h2>
      <span class='grid-text price'>$81.52</span>
      <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
      <button class='grid-btn cart'>Add to Cart</button>
    </div>
  </div>

  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
      <h2>And This Here</h2>
      <span class='grid-text price'>$81.52</span>
      <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
      <button class='grid-btn cart'>Add to Cart</button>
    </div>
  </div>

  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
      <h2>Last Header</h2>
      <span class='grid-text price'>$81.52</span>
      <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
      <button class='grid-btn cart'>Add to Cart</button>
    </div>
  </div>
</div>

<p id="changes"><!-- CHANGES --></p>

相关问题
最新问题