使用子元素和按钮复制除法

Question

如果我没有很好地表达我的问题或正确显示我的代码，那么我很想知道堆栈溢出。从事家庭作业，我必须创造一个像经典策划者一样的游戏。我设计了游戏板并创建了一个“圆形1”分区，其中包含切换颜色按钮，提交按钮，甚至可以调出正确的结果图像（白色和黑色点组合为img png）。

复制轮次的我的js代码如下。我的问题是重复轮次和所有功能9次。我想在提交一个回合后禁用切换颜色按钮，我需要为回合的标题以及结果图像出现的div分配一个新的id（因为每个新的都会改变）猜测）。但无论我尝试什么（生成所有代码作为字符串并附加到正文），我能得到的最好的是10轮，但只有第1轮的功能。所有类和ID都是相同的，因此应该应用相同的事件处理程序和jQuery链接，是吗？

任何人，任何帮助或建议都表示赞赏（谢谢）。

用于创建轮次的脚本代码 -

 const nextRound = '
<div id="Round" class="level">
  <h3 class="title"></h3>
  <div class="buttondisplay">
    <a id="boxa" class="button" class="active"></a>
    <a id="boxb" class="button" class="active"></a>
    <a id="boxc" class="button" class="active"></a>
    <a id="boxd" class="button" class="active"></a>
  </div><a id="submit" class="submitter">SUBMIT</a>
  <div id="res1" class="results"></div>
</div>'; 

const buildRounds = () => { for (i = 1; i <= 10; i++){ 
    $('#Gameboard').append(nextRound); }
}

我想要应用新ID的元素是boxa，boxb，boxc和boxd，以及'submit'和{{1 （for resultsimage.png）。我一直在试图做这项工作。任何帮助都会很棒。或者，如果您需要更多代码，我可以提供。

谢谢！

瑞克

Answer 1

问题

每页的

ID必须是唯一的。您总共有6个不同的ID，每个ID都有10个重复。 jQuery / JavaScript只需要一个#Round或者它只需要一个#boxc所以一旦找到一个id，它就会停在那里，所有其他重复项都会被忽略，或者更糟糕的是不会被完全忽略。基本上，当您有多个元素共享一个id时，如果有的话，您很可能会得到不良结果。因此，您必须使每个ID都唯一，这样做的一种常见方法是在循环期间为每个ID分配一个数字（即"Round"+i）

BTW元素也不能有任何重复的属性。所以

<a id="boxd" class="button" class="active"></a> 

无效，class='button'很可能会被class='active'覆盖。对于单个元素上的多个类，语法为：

 <a id="boxd" class="button active"></a>

详情在演示

中发表

通过使用DevTools检查页面，验证所有ID都是唯一的。

  

Added Demo 2 which uses String Literals instead of Template Literals. IE does not support Template Literals hence Demo 2.

演示1 - 使用模板文字

// Pass a number of rounds (i.e. 'qty')
function buildRounds(qty) {

  /* Declare 'i' with 'let' limits i to only what
  || applies within the scope of the 'for' loop.
  || This limit helps 'i' to increment properly
  || without the influence of references outside
  || of the loop.
  */
  for (let i = 1; i <= qty; i++) {

    /* Use ES6 Template Literals* for complex strings
    || by wrapping the whole string with backticks `.
    || What is seen in code is literally rendered so 
    || new lines are NOT ignored and escaping quotes
    || like this: `\'`or `\"` is not needed.
    || ${variable} is an interpolation of a value
    || inserted into the string. Note that the value 'i'
    || will be different on each loop therefore 
    || ensuring unique ids.
    */
    const nextRound = `
<div id="round${i}" class="level"> 
  <h3 class="title">Round ${i}</h3>
  <div class="buttonDisplay">
    <a id="boxA${i}" class="button">A</a>
    <a id="boxB${i}" class="button">B</a>
    <a id="boxC${i}" class="button">C</a> 
    <a id="boxD${i}" class="button">D</a>
  </div>
  <a id="submit${i}" class="submitter">SUBMIT</a>
  <div id="result${i}" class="results"></div>
</div>
`;
    $('#gameBoard').append(nextRound);
  }

  /* Added function will toggle the '.active' class on/off
  || on each clicked '.button'. I don't know exactly what
  || good a "status" class would be if on every button,
  || so I changed it so now it can be toggled by user
  */
  $('.button').on('click', function() {
    $(this).toggleClass('active');
  });
}
/* Call buildRounds() and pass the number
|| of rounds desired.
*/
buildRounds(10);

/* * Template Literals are not supported by M$ browsers 
|| (i.e. IE). See Demo 2
*/

.button,
.submitter {
  display: inline-block;
  border: 3px ridge blue;
  padding: 0 5px;
  margin: 10px 5px;
  color: blue;
  cursor: pointer;
}

.button.active {
  border: 3px inset red;
  outline: 2px solid tomato;
  color: red;
}

<main id='gameBoard'></main>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

演示2 - 使用+连接字符串。

function buildRounds(qty) {

  for (let i = 1; i <= qty; i++) {

    /* This portion of the code is modifed to the use
    || of string literals instead of template literals.
    || If IE support is needed, then use this version.
    */
    const nextRound = '<div id="round' + i + '" class ="level"><h3 class="title"> Round ' + i + ' </h3><div class="buttonDisplay"><a id="boxA' + i + '" class="button">A</a><a id="boxB' + i + '" class="button">B</a><a id="boxC' + i + '" class="button">C</a><a id="boxD' + i + '" class="button">D</a></div><a id="submit' + i + '" class="submitter">SUBMIT</a><div id="result' + i + '" class = "results"></div></div>';

    $('#gameBoard').append(nextRound);
  }

  $('.button').on('click', function() {
    $(this).toggleClass('active');
  });
}

buildRounds(10);

.button,
.submitter {
  display: inline-block;
  border: 3px ridge blue;
  padding: 0 5px;
  margin: 10px 5px;
  color: blue;
  cursor: pointer;
}

.button.active {
  border: 3px inset red;
  outline: 2px solid tomato;
  color: red;
}

<main id='gameBoard'></main>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>