我正在尝试建立一个功能非常基础的网站。基本上，该网站应包含各种按钮，并根据单击哪个系列的按钮来显示图像。不幸的是，我的网站开发经验非常有限(或者可以说没有)，但我在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>
"[" + values.join('') + "]\.png"或者regex = "(" + values.join('|') + "){" + values.length + "}"进行匹配的情况。由于您的代码限制为15个字符，不清楚"A1.png"是否会匹配"ABC123"或文件名是否必须与所选字符的长度相同。 - freedomn-m