2

我有一群学生，应该通过单击“button-newPairs”按钮随机配对。这些对应显示在 8 个 div 中“一对一”、“对二”、...，其中包含两个跨度“studentOne”和“studentTwo”。我在控制台中获得了对，但不是通过单击“button-newPairs”按钮获得的，而且我不知道如何在我的跨度中更改或插入文本内容。有人能帮助我吗？先感谢您。

var students = ['Al', 'Ma', 'Pu', 'Mi', 'Ma', 'Me', 'Ca', 'Na', 'Ja', 'Go', 'Ha', 'Fa', 'Ti', 'Fi' ];
var studentOne = document.querySelector('#student1');
var studentTwo = document.querySelector('#student2');


if (students.length % 2 != 0) {
  alert("You must have an even number of students. You currently have " + students.length + " students.");
} else {
  var arr1 = students.slice(), 
      arr2 = students.slice(); 

  arr1.sort(function () { return 0.5 - Math.random(); }); 
  arr2.sort(function () { return 0.5 - Math.random(); });

  while (arr1.length) {
    var student1 = arr1.pop(), 
        student2 = arr2[0] == student1 ? arr2.pop() : arr2.shift();


      $(".button-newPairs").click(function () {
        studentOne.textContent = student1;
        studentTwo.textContent = student2;      
      });
    
  
    console.log(student1 + ' works with ' + student2);
  }
}
   
.container-pairs {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-gap: 20px;
  justify-content: space-around;
  align-content: center;
  margin-bottom:20px;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1;
}
.two {
  grid-column: 2 / 2;
  grid-row: 1;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<div class="container-pairs">

        <div class="pair one">
          <span id="studentOne">NEW </span> <br>
          <span id="studentTwo"> PAIRS</span>
        </div>
        <div class="pair two">
          <span id="studentOne">NEW </span><br>
          <span id="studentTwo"> PAIRS</span>
        </div>
       
  <div id="container-footer">
          
          <div class="button-newPairs">
              <span>NEW PAIRS</span>
          </div>
  </div>

</body>

4

2 回答 2

0

我已经评论了内联。查找带有 // 的行

// Let's wrap this in a function so that we can call it with our button.
function makePairs() {

  // We will clear our lists before each run of the function.
  $('#studentOne').html('<h1>Student 1</h1>');
  $('#studentTwo').html('<h1>Student 2</h1>');
  
  var students = ['Al', 'Ma', 'Pu', 'Mi', 'Ma', 'Me', 'Ca', 'Na', 'Ja', 'Go', 'Ha', 'Fa', 'Ti', 'Fi'];
  
  // By capturing these nodes in variables, we can reference them as our targets for insertion, below.
  var studentOne = document.querySelector('#studentOne');
  var studentTwo = document.querySelector('#studentTwo');


  if (students.length % 2 != 0) {
    alert("You must have an even number of students. You currently have " + students.length + " students.");
  } else {
    var arr1 = students.slice(),
      arr2 = students.slice();

    arr1.sort(function() {
      return 0.5 - Math.random();
    });
    arr2.sort(function() {
      return 0.5 - Math.random();
    });

    // Here we make a function that will insert a DOM fragment inside a target node
    const insertFragment = (output, target) => {
      let el;
      let fragment = document.createDocumentFragment();
      el = document.createElement('p');
      el.innerText = output
      fragment.appendChild(el);
      target.appendChild(fragment);
    }

    while (arr1.length) {
      var student1 = arr1.pop(),
        student2 = arr2[0] == student1 ? arr2.pop() : arr2.shift();

      // Here we use the function, sending student1 (the student) to studentOne (the target DOM node specified at the very top, #studentOne)
      insertFragment(student1, studentOne)
      insertFragment(student2, studentTwo)
      console.log(student1 + ' works with ' + student2);
    }
  }
}

// Run the function on load
makePairs();
.container-pairs {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-gap: 20px;
  justify-content: space-around;
  align-content: center;
  margin-bottom: 20px;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1;
}

.two {
  grid-column: 2 / 2;
  grid-row: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container-pairs">
    <div id="studentOne">
      <h1>Student 1</h1>
    </div>
    <div id="studentTwo">
      <h1>Student 2</h1>
    </div>
  </div>
  <div id="container-footer">
    <button class="button-newPairs" onclick="makePairs()">
          NEW PAIRS
        </button>
  </div>
</body>

就在这一行上方的按钮标记已为单击注册了一个事件处理程序，该处理程序将再次运行 makePairs() 函数。

于 2018-05-11T20:45:25.107 回答
-1

我会使用 splice 从数组中删除用户并循环遍历每个用户，如下所示：

let students = ['Al', 'Ma', 'Pu', 'Mi', 'Ma', 'Me', 'Ca', 'Na', 'Ja', 'Go', 'Ha', 'Fa', 'Ti', 'Fi'];


while (students.length) {
  let student1 = students.splice((Math.random() * 1000) % students.length, 1)
  let student2 = students.splice((Math.random() * 1000) % students.length, 1)

  console.log(`${student1} works with ${student2}`)
}

于 2018-05-11T20:20:19.007 回答