javascript - 通过一系列按钮点击显示图像

Question

我正在尝试构建一个具有非常基本功能的网站。本质上，该网站应该包含各种按钮，并根据单击的按钮系列显示图像。不幸的是，我在 web 开发方面的经验有限(甚至没有)，但我在 stackoverflow 上发现了一些在某种程度上可以工作的代码。在此基础上，我想以一种允许我实现所需功能的方式更改代码。

网站应该是这样的:

如您所见，该网站包含 A-D 和 0-9 的各种按钮。按钮点击记录在下面的字段中，一旦输入与文件名匹配的组合，就会显示图像。

代码如下:

              
    $(document).ready(function() {
      /**
       * Select the buttons.
       * The $display and $clickedButtons are just to output
       * the values that are stored.
       */
      const $buttons = $('.button');
      const $display = $('#display');
      const $clickedButtons = $('#clicked-buttons');
      const $reset = $('#reset');
      $reset.on('click', function() {
        values = [];
        $clickedButtons.text(values);
      });
      
      /**
       * Array which tracks your clicked buttons.
       * If a button is clicked, the value of that button
       * should be added to this array. The combination
       * of the values will then later represent the key.
       */
      var values = [];
      
      /**
       * Listen for the click event on all the buttons.
       * When clicked, get the value of that clicked button
       * and add that to the values array.
       * After that the clicked button values will be combined
       * to form a single key and check if that key matches 
       * a combination. If there is a match the content should
       * be anything other than undefined.
       */

      $buttons.on('click', function() {
        // This is the currently clicked button.
        const $button = $(this);
        
        // Get the value of the button.
        const value = $button.val();
        
        // If there already are 15 previously clicked buttons,
        // then empty the array, so we can start a new combination.
        if (values.length === 15) {
          values = [];
        }
        
        // Now add the newly clicked value.
        values.push(value);
        
        // This will output the current values in the array.
        $clickedButtons.text(values);
        
        // Transform the array into a single string.
        // This will be the key to select content.
        // ["1", "2", "3"] becomes "123".
        const key = values.join('');    
        
        // Check if key has a match in the combinations object.
        $display.attr('src', 'output/' + key + '.png');
      });
    }); 

现在我的问题是:代码要求按钮组合完全按照图像名称的顺序单击。例如，输入 A-B-C-1-2-3 将显示 ABC123.png。然而，出于我的目的，即使输入是 31B2AC 或这 6 个输入的任何其他组合，我也需要代码来显示 ABC123.png。我研究了“排序”选项，但这在另一方面产生了一个问题，即一些图片的命名方式是这样的，例如D9B6C4.png 因此不存在排序算法运行所需的适用逻辑，如字母或数字。文件夹中的每个图像都有唯一性，但是当 ABC123.png 存在时，BCA321 不存在。

我需要脚本做的是解析图片并找到包含所有输入的字母和数字的唯一图片，无论它们的顺序如何。这可能吗？我将如何实现这一目标？

/////////编辑////////

我尝试添加显示、点击按钮的跟踪器以及删除按钮:

所以不太确定为什么实际上没有任何效果。输入既没有显示在适当的字段中，也没有显示图片 ...

       
  const $buttons = $('.button');
  const $display = $('#display');
  const $clickedButtons = $('#clicked-buttons');
  const $removeButton = $('#remove-button');    
  const values = [];
        
var imgs = ["ABC123.png", "1A2B4C.png", "ABC132.png", "123ABC.png"];

function case_insensitive_comp(strA, strB) {
  return strA.toLowerCase().localeCompare(strB.toLowerCase());
}

function reSortFiles() {
  var all = {};
  imgs.forEach(function(a) {
    d = a.split(".");
    img = d[0].split("");
    img = sortStr(img);
    img = img.join("");

    all[img] ? all[img].push(a) : all[img] = [a];
  });

  return all;
}

function sortStr(str) {
  return str.sort(case_insensitive_comp)
}

function tryCombination() {
    // This will output the current values from the array.
    $clickedButtons.text(values);        
    
const key = values.join('');  
        
allImages = reSortFiles()
console.log(allImages)


buttons = document.querySelectorAll("button")

clicked = "";

buttons.forEach(function(btn) {
  btn.addEventListener("click", function(e) {
    clicked += e.target.dataset.value;
    clicked_s = sortStr(clicked.split("")).join("")
    console.log(clicked, clicked_s)
    img = allImages[clicked_s]
    if (img) {
      console.log("Found: ", img.join(","))
      clicked=""; 
    }
  });
});

   
.container {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 200px 1fr;
  grid-gap: 1em;
  border: 1px solid #d0d0d0;
  background-color: #f7f7f7;
  padding: 1em;
  border-radius: 5px;
}

.buttons {
  grid-area: 1 / 1 / 2 / 3;
}

#display {
  grid-area: 2 / 1 / 3 / 2;
  width: 200px;
  height: 200px;
  background-color: #d0d0d0;
  border-radius: 5px;
}

#clicked-buttons {
  grid-area: 2 / 2 / 3 / 3;
  display: block;
  background-color: #d0d0d0;
  border-radius: 5px;
  padding: 1em;
  margin: 0;
}

#remove-button {
  grid-area: 1 / 2 / 2 / 3;
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="buttons">
    <button class="button" id="1" value="1" >1</button>
    <button class="button" id="2" value="2" >2</button>
    <button class="button" id="3" value="3" >3</button>
    <button class="button" id="4" value="4" >4</button>
    <button class="button" id="5" value="5" >5</button>
    <button class="button" id="6" value="6" >6</button>
  </div>
  <img id="display" class="hidden">
  <button id="remove-button">Remove last input</button>
  <code id="clicked-buttons"></code>
</div>

Answer 1

这是我的工作解决方案，尽管有点老套。

将所有图像加载到一个数组中，只有文件名。

然后遍历所有这些文件并创建一个以排序后的名称作为键、文件名作为值的对象。这样无论图像如何命名，它们都会有一个像 999XXX 这样的 key 。

然后只需单击按钮并对其字符串进行排序直到该字符串作为键存在即可。

var imgs = ["ABC123.png", "1A2B4C.png"];

function case_insensitive_comp(strA, strB) {
  return strA.toLowerCase().localeCompare(strB.toLowerCase());
}

function reSortFiles() {
  var all = {};
  imgs.forEach(function(a) {
    d = a.split(".");
    img = d[0].split("");
    img = sortStr(img);
    img = img.join("");

    all[img] = a;
  });

  return all;
}

function sortStr(str) {
  return str.sort(case_insensitive_comp)
}

allImages = reSortFiles()

buttons = document.querySelectorAll("button")

clicked = "";

buttons.forEach(function(btn) {
  btn.addEventListener("click", function(e) {
    clicked += e.target.dataset.value;
    clicked = sortStr(clicked.split("")).join("")
    img = allImages[clicked]
    if (img) {
      console.log(img)
    }
  });
});

<button type="button" data-value="A">A</button>
<button type="button" data-value="B">B</button>
<button type="button" data-value="C">C</button>
<button type="button" data-value="1">1</button>
<button type="button" data-value="2">2</button>
<button type="button" data-value="3">3</button>

---

允许多个版本

var imgs = ["ABC123.png", "1A2B4C.png", "ABC132.png", "123ABC.png"];

function case_insensitive_comp(strA, strB) {
  return strA.toLowerCase().localeCompare(strB.toLowerCase());
}

function reSortFiles() {
  var all = {};
  imgs.forEach(function(a) {
    d = a.split(".");
    img = d[0].split("");
    img = sortStr(img);
    img = img.join("");

    all[img] ? all[img].push(a) : all[img] = [a];
  });

  return all;
}

function sortStr(str) {
  return str.sort(case_insensitive_comp)
}

allImages = reSortFiles()
console.log(allImages)


buttons = document.querySelectorAll("button")

clicked = "";

buttons.forEach(function(btn) {
  btn.addEventListener("click", function(e) {
    clicked += e.target.dataset.value;
    clicked_s = sortStr(clicked.split("")).join("")
    console.log(clicked, clicked_s)
    img = allImages[clicked_s]
    if (img) {
      console.log("Found: ", img.join(","))
      clicked=""; 
    }
  });
});

<button type="button" data-value="A">A</button>
<button type="button" data-value="B">B</button>
<button type="button" data-value="C">C</button>
<button type="button" data-value="1">1</button>
<button type="button" data-value="2">2</button>
<button type="button" data-value="3">3</button>
<button type="button" data-value="4">4</button>