1

我正在尝试计算用户input和生成的数字之间常见字母的数量。我正在计算它，以便它们之间的位置无关紧要（所以 411 和 004 应该说“1 个共同数字”）。

我把我的放在code下面的一个片段中。它工作正常，除了那个，当生成的string有两个相同的数字时，它不能正常工作。您可以通过键入“4”看到，它会说有两个字符。通常，当实际上只有一个时（它会将四个数​​两次。）

所以，毕竟，我在问什么是显示 theinput和 the之间常见字母的最佳方式generated number?

我可以使用jQueryand/or JavaScript，如果我的代码不是很好，我很抱歉，我根本不是很先进。

提前感谢您的帮助！:)

  // on ".check" click...

$(".check").click(function() {
  var nmb = $(".number").text();
  var ltr = $(".input").val();
  var count = $(".cnt");

  // Set logged text to 0
  
  count.text("0");

  // Test for numbers in common

  if (ltr.includes(nmb.charAt(0))) {
    count.html(function(i, val) {
      return val * 1 + 1
    });
  }
  if (ltr.includes(nmb.charAt(1))) {
    count.html(function(i, val) {
      return val * 1 + 1
    });
  }
  if (ltr.includes(nmb.charAt(2))) {
    count.html(function(i, val) {
      return val * 1 + 1
    });
  }
  if (ltr.includes(nmb.charAt(3))) {
    count.html(function(i, val) {
      return val * 1 + 1
    });
  }
  
  $(".res1").html(" numbers in common");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Generated Number: <span class="number">4410</span><br><br>
<input type="text" class="input" placeholder="Try typing 4 to see the issue" maxlength="4">
<input class="check" type="submit" value="CHECK">
<br><br>
<span id="full_res">
  <span class="cnt"></span>
  <span class="res1"></span>
</span>

4

3 回答 3

3

首先，您可以将每个字符串减少为仅包含唯一字符，即 4410 可以减少到 410，因为您不需要多次测试 4。Set您可以通过为每个字符串创建一个来做到这一点：

var numberSet = new Set(nmb);
var inputSet = new Set(ltr);

然后你可以迭代其中一个，以最少的迭代次数最短，并使用该has()方法查看该字符是否在另一个Set

var counter = 0;
for(letter of inputSet){
  if(numberSet.has(letter)){
    counter++;
  }
}


// on ".check" click...

$(".check").click(function() {
  var nmb = new Set( $(".number").text() );
  var ltr = new Set( $(".input").val() );
  var count = $(".cnt");

  var counter = 0;
  for(let letter of nmb){
     if(ltr.has(letter)){
       counter++;
     }
  }
  //No need to continually update text / html as each update wont be
  //seen anyway so just set it once outside the loop.
  count.text(counter);
  
  $(".res1").html(" numbers in common");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Generated Number: <span class="number">4410</span><br><br>
<input type="text" class="input" placeholder="Try typing 4 to see the issue" maxlength="4">
<input class="check" type="submit" value="CHECK">
<br><br>
<span id="full_res">
  <span class="cnt"></span>
  <span class="res1"></span>
</span>

于 2018-04-28T03:55:55.077 回答
1

您可以执行以下操作：

$(".check").click(function() {
  var nmb = $(".number").text().trim().split('');   //Get the text and convert to string
  var ltr = $(".input").val().trim().split('');     //Get the value and convert to string
  var commonLetters = [];                           //The common letters will be stored on this variable

  ltr.forEach(function(v) {                         //Loop thru the user's input letters
    var idx = nmb.indexOf(v);                       //Find its index
    if (idx !== -1) {                               //Check if found
      commonLetters.push(4);                        //If found, push the letters to commonLetters
      nmb[idx] = '';                                //Clear the index
    }
  })

  $(".cnt").text(commonLetters.length);
  $(".res1").html(" numbers in common");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Generated Number: <span class="number">4410</span><br><br>
<input type="text" class="input" placeholder="Try typing 4 to see the issue" maxlength="4">
<input class="check" type="submit" value="CHECK">
<br><br>
<span id="full_res">
   <span class="cnt"></span>
   <span class="res1"></span>
</span>

于 2018-04-28T03:55:53.177 回答
1

这并不完全是微不足道的。例如，您不能简单地单独使用filteror includesorhas测试，因为一旦找到一个字符，您必须从每个集合中删除它，这样它就不会再次匹配。每次找到匹配项时，我都会使用字符数组来删除找到的reduce字符。splice（这个不需要jQuery）

document.querySelector('.check').addEventListener('click', () => {
  const numChars = [...document.querySelector('.number').textContent];
  const inputChars = [...document.querySelector('.input').value];
  const matchingCharCount = inputChars.reduce(
    ({ remainingNumChars = numChars, matchCount = 0 } = {}, inputChar) => {
      if (remainingNumChars.includes(inputChar)) {
        remainingNumChars.splice(remainingNumChars.indexOf(inputChar), 1);
        matchCount++;
      }
      return { remainingNumChars, matchCount };
    }, { remainingNumChars: numChars, matchCount: 0 })
    .matchCount;
  document.querySelector('.cnt').textContent = matchingCharCount;
  document.querySelector('.res1').textContent = " numbers in common"
});
Generated Number: <span class="number">4410</span><br><br>
<input type="text" class="input" maxlength="4">
<input class="check" type="submit" value="CHECK">
<br><br>
<span id="full_res">
  <span class="cnt"></span>
  <span class="res1"></span>
</span>

于 2018-04-28T03:57:46.113 回答