Question

对于我正在开发的简单游戏，我有一张（最初）为空的升级表。目前，HTML很简单，对于表格来说就像这样：

<table id='upgradeTable'>
    <tr>
        <td>
        </td>
    </tr>

但是，我有这个游戏的升级。我每次升级都有一个小的HTML块，可以为不同的货币格式化颜色，更新升级的成本及其效果等。下面是一个示例：

<button id="mastersDegreeUpgButton" class="upgradeButtons" onClick="upgrade(UPGRADES[returnIndex(UPGRADES,'mastersDegreeUpg')])">Masters Degree </button>
<div class='tooltip' id='mastersDegreeUpgTooltip'>
    <span>Get your grad students into shape! And off a diet of ramen.
        <br /> </span>
    <span class='tooltipMoneyColor'>
        <span class='boldedNumbers' id='mastersDegreeUpgMoneyCostDisp'> 10,000 </span> dollars
        <br /> </span>
    <span class='tooltipScienceColor'>
        <span class='boldedNumbers' id='mastersDegreeUpgScienceCostDisp'> 100 </span> science
        <br /> </span>
    <span class='tooltipPopularityColor'>
        <span class='boldedNumbers' id='mastersDegreeUpgPopularityCostDisp'> 20 </span> popularity
        <br /> </span>
    <span>----------------------------------------------------------------</span>
    <div>Grad Student Counting: +100%</div>
    <div>Grad Student Science Production: 0.004/sec</div>
</div>

我还有升级对象，存储在数组中。这是一个例子：

name: "Masters Degree",
desc: "Get your grads up to speed.",
moneyCost: 10000,
scienceCost: 100,
popularityCost: 20,
requirement: (resources.science.amount >= 70),
buildingAffected: BUILDINGS[1],
buildingCurrencyAffected: null,
upgVal: 3,
upgProdResource: null,
upgProdAmount: null,
id: 'mastersDegreeUpg',
index: 2

我想要实现的主要目标是： 1）当升级满足要求时，它将被添加到表中。但是，当我尝试执行以下操作时遇到的问题：

var table = getId('upgradeTable');    
table.appendChild(tr = document.createElement("tr"));
tr.appendChild(td = document.createElement("td"));
td.innerHTML = // ????? 
td.style.visibility = 'visible';

td.innerHTML会发生什么？甚至可以用js添加那么多的HTML吗？

我尝试制作列出了HTML的升级对象的属性HTML，然后使用td.innerHTML = //(upgrade object goes here).html，但我收到JSX expressions must have at least one parent的错误（我只有几周时间了编码所以我不知道这意味着什么。）

我想要这样做的主要原因（如果有更好的替代方法）是我的升级表（有一列和多行可见升级）会自动压缩空白区域。当我有固定的表格元素（已经放入HTML中，并且所有更改的内容都是可见性）时，如果播放器没有顺序解锁升级（根据我当前的设计这是不可能的），那么之间会有很多空白区域它之前的升级和升级（如果一个解锁升级在行索引2中，而下一个在行索引6中，则在它们之间会有三个空白点）。由于我想在这个游戏中进行200多次升级（一次至少显示15-20次），因此我需要将它们压缩以避免用完页面空间。

感谢您的帮助！

Answer 1

不要隐式创建全局变量，如果可能的话，不要在条件语句内部进行分配 - 如果必须，请事先声明变量。

但是，是的，使用模板文字可以同时附加那么多HTML，这是非常简单的：

const table = getId('upgradeTable');    
const tr = document.createElement("tr")
table.appendChild(tr);
const td = document.createElement("td")
tr.appendChild(td);
td.innerHTML = `
<button id="mastersDegreeUpgButton"class="upgradeButtons"onClick="upgrade(UPGRADES[returnIndex(UPGRADES,'mastersDegreeUpg')])">Masters Degree </button>     
<div class='tooltip' id='mastersDegreeUpgTooltip'> 
<span>Get your grad students into shape! And off a diet of ramen. <br /> </span>
<span class='tooltipMoneyColor'> <span class='boldedNumbers' id='mastersDegreeUpgMoneyCostDisp'> 10,000 </span> dollars<br /> </span>
<span class='tooltipScienceColor'> <span class='boldedNumbers' id='mastersDegreeUpgScienceCostDisp'> 100 </span> science<br /> </span>
<span class='tooltipPopularityColor'> <span class='boldedNumbers' id='mastersDegreeUpgPopularityCostDisp'> 20 </span> popularity<br /> </span>
<span>----------------------------------------------------------------</span>
<div>Grad Student Counting: +100%</div>
<div>Grad Student Science Production: 0.004/sec</div>
</div>
`;
td.style.visibility = 'visible';

但请注意，内联事件处理程序在HTML标记内部基本上是eval - 它们是不好的做法，导致代码性能差，难以管理的代码。请认真考虑使用JavaScript附加您的活动，例如：https://developer.mozilla.org/en/DOM/element.addEventListener

你可以这样做：

const table = getId('upgradeTable');    
const tr = document.createElement("tr")
table.appendChild(tr);
const td = document.createElement("td")
tr.appendChild(td);
td.innerHTML = `
<button id="mastersDegreeUpgButton"class="upgradeButtons">Masters Degree </button>     
<div class='tooltip' id='mastersDegreeUpgTooltip'> 
// ...
`;
// this references the button:
td.children[0].addEventListener('click', () => {
  upgrade(UPGRADES[returnIndex(UPGRADES,'mastersDegreeUpg')]);
});

使用js将预格式化的按钮添加到表中（以压缩空白区域）？

1 个答案: