我必须列出单词：
<div class="first-word-list">
<span>apple</span>
<span>sea</span>
<span>ship</span>
</div>
<div class="second-word-list">
<span>duck</span>
<span>tale</span>
<span>jewelry</span>
</div>
客户可以将任何单词添加到这些列表中，因此它不仅仅是这 6 个单词。我正在使用一个函数，当click事件时，它会更改单词，在此结构上创建这两个列表的组合：
<div class="first-word"></div><div class="second-word"></div>
$('.first-word').click(function(){
$('.first-word').text($(".first-word-list span").eq(Math.floor(Math.random()*firstWordLength)).text());
});
$('.second-word').click(function(){
$('.second-word').text($(".second-word-list span").eq(Math.floor(Math.random()*firstWordLength)).text());
});
因此，如果用户单击.first-word并点击.second-word它会显示以下内容：
<div class="first-word">sea</div><div class="second-word">tale</div>
但假设我想阻止/避免显示ship和jewelry的组合。由于我使用的是随机函数，就像我之前写的那样，单词列表会增长，我需要一种方法来控制哪些单词组合不会显示。知道怎么做吗？
更新客户端将在两个新的自定义字段上写入禁止的组合，这些字段将输出到一个新列表中，如下所示：
<div class="banned-combinations">
<div><span>ship</span><span>jewelry</span></div>
<div><span>apple</span><span>duck</span></div>
</div>
这是一个代码段，允许您动态地将单词添加到任一列表，并从这些列表中选择单词以将它们标记为禁止的组合。输入所需的所有内容后，您可以单击两个随机单词以将它们替换为新的随机单词(可能再次是相同的单词(，同时考虑到禁止的组合：
// Allow adding words to either word list:
$(".add-word").on("change keydown", function (e) {
if (e.which && e.which != 13) return;
$(this).before($("<span>").text($(this).val()));
$(this).val('');
});
// Allow selecting words by clicking them
$(".word-list").on("click", "span", function () {
$(".selected", $(this).parent()).removeClass("selected");
$(this).addClass("selected");
showButton();
});
// Allow forbidding pairs of selected words:
$("#forbid").click(function () {
$(".forbidden").append(
$("<div>").append(
$(".selected").removeClass("selected").clone(),
$("<button>").addClass("del").text("Del")
)
);
showButton();
});
// Remove forbidden pair:
$(document).on("click", ".del", function () {
$(this).parent().remove();
});
// Hide/show button depending on whether we have enough selected words:
function showButton() {
$("#forbid").toggle($(".selected").length == 2);
}
// Main algorithm:
$(".random-word").click(function () {
var index = $(this).index(".random-word");
// Get word that is not clicked:
var otherword = $(".random-word").eq(1-index).text();
// Get all words from corresponding list
var words = $("span", $(".word-list").eq(index)).map(function () {
return $(this).text();
}).get();
// Get list of forbidden words that are linked with the other (non-clicked) word
var forbidden = $('.forbidden div').filter(function () {
return $('span', this).eq(1-index).text() == otherword;
}).map(function () {
return $('span', this).eq(index).text();
}).get();
// Derive the list of allowed words, taking all words, filtering out what is forbidden
var allowed = words.filter(function (txt) {
return forbidden.indexOf(txt) == -1;
});
// Pick a random from these allowed words:
$(this).text(allowed.length
? allowed[Math.floor(Math.random() * allowed.length)]
: "(none)"
);
});
showButton();
// *** Upon special request following was added ***
// Algorithm for choosing random pair in one go:
$("#choose").click(function () {
// Get all words from both lists
var words = $(".word-list").get().map(function (list) {
return $("span", list).get().map(function (span) {
return $(span).text();
});
});
// Get list of forbidden words pairs
var forbidden = $('.forbidden div').get().map(function (div) {
return $('span', div).get().map(function (span) {
return $(span).text();
});
});
// Derive the list of allowed pairs, taking all pairs, filtering out what is forbidden
var allowed = words[0].reduce(function (pairs, word) {
// Get list of forbidden second words, given the first word
var exclude = forbidden.filter(function(pair) {
return pair[0] == word;
}).map(function (pair) {
return pair[1]; // extract second word of the pair
});
// Filter all second words, excluding those that are forbidden pairs with first word.
return pairs.concat(words[1].filter(function (word2) {
return exclude.indexOf(word2) == -1;
}).map(function (word2) {
return [word, word2];
}));
}, []);
// Pick a random pair from these allowed pairs:
var randomPair = allowed.length
? allowed[Math.floor(Math.random() * allowed.length)]
: ["(none)", "(none)"];
// Display the pair
$(".random-word").each(function (i) {
$(this).text(randomPair[i]);
});
});span {margin-left: 2px; margin-right: 2px}
span.selected {background-color: yellow}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>First word list:</b>
<div class="word-list">
<span>apple</span>
<span>sea</span>
<span>ship</span>
<input class="add-word" size=10>
</div>
<b>Second word list:</b>
<div class="word-list">
<span>duck</span>
<span>tale</span>
<span>jewelry</span>
<input class="add-word" size=10>
</div>
<button id="forbid">Add combination as forbidden</button><br>
<b>Forbidden combinations:</b>
<div class="forbidden">
</div>
<b>Random Pair (click a word to reselect a random, allowed word):</b>
<div class="random-word">sea</div><div class="random-word">tale</div>
<button id="choose">Random Pick Both</button>我不确定您要如何处理添加禁止的选项，但如果一切都需要动态，那么您始终可以使用字典(对象(。
var bannedOptions = {
'ship': {
'jewelry': true
}
};
当您检查某个选项是否有效时，您可以简单地执行以下操作：
// Here I'm using truthy checks,you can always add a != null
// if you want false or something to be a valid value
if(bannedOptions[word1] && bannedOptions[word1][word2]) {
// It's invalid
} else {
// Valid
}
当您想添加新的无效选项时，您可以
if(!bannedOptions[newWord]) bannedOptions[newWord] = {};
bannedOptions[newWord][invalidWord] = true;
如果要删除无效选项，可以执行以下操作：
bannedOptions[word1][word2] = false;
或
delete bannedOptions[word1][word2];
使用字典可以让您在想要查看组合是否无效时进行超快速检查。
它是超级动态的，所以你不必担心索引或任何东西，因为单词本身就是关键......只要单词作为字符串访问，您就可以在单词中包含-、'、/等符号。