我正在创建一个网站，用户必须使用select选项中的单词创建短语。我希望能够检测出他正在做的一个创造事件的句子；就像句子是"；天空是蓝色的"；所以"；将背景颜色变为蓝色"；。或者"；是大的"；所以"；将文本大小更改为更大的字体"；
所以我认为它看起来类似于：
if (phrase = "I am blue."){
$(".white").css('background-color', 'blue');
}
或者：
if (phrase = "Is big"){
$(".white").css('font-size', '5em');
}
内部的所有内容
$('select').on('change', function() {
console.log(phrase);
if (phrase = "Is big"){
$(".white").css('font-size', '5em');
}
});
它并没有起到这个作用——它必须达到短语。这是我的一个朋友帮我做的代码：
$(document).ready(function() {
});
let phrases = ["I am not. "
];
let lettres = /[u0041-u005au0061-u007au00aa-u00b5u00ba-u00c0u00c1-u00d6u00d8-u00f6]/gui;
tokenize = function(phrase) {
let mots = [''];
let it = phrase[Symbol.iterator]();
for (var c = it.next(); !c.done; ) {
for (; !c.done && c.value.match(lettres); c = it.next()) {
mots[mots.length-1]+=(c.value);
}
//console.log(c.value);
if (mots[mots.length-1].length != 0 ){
mots.push('');
}
if (c.value == ' ') {
for (c = it.next(); !c.done && c.value == " "; c = it.next()) {continue;} continue;
}
// console.log(i);
console.log(mots);
if (!c.value.match(lettres)){
mots[mots.length-1]+=(c.value);
//console.log(c.value);
mots.push('');
}
c = it.next();
}
return mots.slice(0, mots.length-1);
if (phrase === "I am blue."){
$(body).css('background-color', 'blue');
}
}
$(document).ready(function() {
let LARGEUR = $("#container .repeat").clone();
let change=function(){
$(".width_tmp_option", this.parent).html($('option:selected', this).val());
$(this).width($(".width_tmp_select", this.parent).width());
}
$('#container').on("change",".un",change);
let idx = Math.floor(Math.random() * Math.floor(phrases.length));
let mots = tokenize(phrases[idx]);
for( var i = 0 ; i < mots.length-1; i++){
$('#container .repeat:last-child').after(LARGEUR.clone());}
var i = 0;
console.log(mots.length);
$('#container .repeat').each(function(){
$('.un', this).val(mots[i]).each(change);
i++;
});
// for ( var i in mots){
// let div = LARGEUR.clone();
// div.find('.un').val(mots[i]);
// console.log(i);
// div.find('.un').each(change);
//div.css('display', 'inline');
// }
// // $('#container .repeat:first-child').css('display', 'none');
});@font-face {
font-family: "Lexicon";
src: url("fontes/Lexicon.woff") format("woff");
}
body {
width: 70vw;
height: 100vh;
overflow: normal;
font-family:'Lexicon';
overflow: hidden;
}
.un{
width: 2rem;
margin: 0.2rem;
font-family: 'Lexicon';
}
option {
background-color: none;
font-family: 'Lexicon';
}
option:hover {
background-color: green;
}
::selection {
background-color: green;
}
.width_tmp_select{
background-color: none;
}
.width_tmp_select{
display : none;
font-size: 2.5rem;
font-family: 'Lexicon';
}
.un{
font-size: 2.5rem;
}
#p1{
font-size: 2rem;
border: none;
}
select {
}
/* For IE10 */
select::-ms-expand {
display: none;
}
.repeat {
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link rel="stylesheet"type="text/css"href="style.css">
<link rel="stylesheet"type="text/css"href="print.css" media="print">
<title>Les Vergers</title>
</head>
<body class="white">
<div id="container">
<div class="repeat">
<select name="mots" class="un">
<option value=""> </option>
<option value=".">.</option>
<option value="I">I</option>
<option value="am">am</option>
<option value="blue">blue</option>
<option value="not">not</option>
<option value="is">is</option>
<option value="big">big</option>
<option value="!">!</option>
</select>
<select class="width_tmp_select">
<option class="width_tmp_option"></option>
</select>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
});
let phrases = ["I am not. "
];
let lettres = /[u0041-u005au0061-u007au00aa-u00b5u00ba-u00c0u00c1-u00d6u00d8-u00f6]/gui;
tokenize = function(phrase) {
let mots = [''];
let it = phrase[Symbol.iterator]();
for (var c = it.next(); !c.done; ) {
for (; !c.done && c.value.match(lettres); c = it.next()) {
mots[mots.length-1]+=(c.value);
}
//console.log(c.value);
if (mots[mots.length-1].length != 0 ){
mots.push('');
}
if (c.value == ' ') {
for (c = it.next(); !c.done && c.value == " "; c = it.next()) {continue;} continue;
}
// console.log(i);
console.log(mots);
if (!c.value.match(lettres)){
mots[mots.length-1]+=(c.value);
//console.log(c.value);
mots.push('');
}
c = it.next();
}
return mots.slice(0, mots.length-1);
if (phrase === "I am blue."){
$(body).css('background-color', 'blue');
}
}
$(document).ready(function() {
let LARGEUR = $("#container .repeat").clone();
let change=function(){
$(".width_tmp_option", this.parent).html($('option:selected', this).val());
$(this).width($(".width_tmp_select", this.parent).width());
}
$('#container').on("change",".un",change);
let idx = Math.floor(Math.random() * Math.floor(phrases.length));
let mots = tokenize(phrases[idx]);
for( var i = 0 ; i < mots.length-1; i++){
$('#container .repeat:last-child').after(LARGEUR.clone());}
var i = 0;
console.log(mots.length);
$('#container .repeat').each(function(){
$('.un', this).val(mots[i]).each(change);
i++;
});
});
</script>
</body>
</html>我希望我能理解你的需求，如果不告诉我
，我会编辑我的答案。
示例HTML：
<select id="colorChanger">
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
示例jQuery(确保已加载jQuery(
<script>
jQuery(function($){
$('#colorChanger').on('change', function() {
var bgcolor = $(this).val();
$('body').css('background', bgcolor);
})
})
</script>
示例：
https://jsfiddle.net/sagive/tj9s7bf5/3/
您也可以在选择选项中使用直接十六进制代码(即：#ff0099(，而不是颜色名称。您基本上可以将其应用于任何选择(具有唯一ID(。
根据您的请求编辑1:
-另一个示例
<select id="firstSelect" class="watchedSelect">
<option value=""> </option>
<option value=".">.</option>
<option value="I">I</option>
<option value="am">am</option>
<option value="blue">blue</option>
<option value="not">not</option>
<option value="is">is</option>
<option value="big">big</option>
<option value="!">!</option>
</select>
<select id="secondSelect" class="watchedSelect">
<option value=""> </option>
<option value=".">.</option>
<option value="I">I</option>
<option value="am">am</option>
<option value="blue">blue</option>
<option value="not">not</option>
<option value="is">is</option>
<option value="big">big</option>
<option value="!">!</option>
</select>
<select id="thirdChanger" class="watchedSelect">
<option value=""> </option>
<option value=".">.</option>
<option value="I">I</option>
<option value="am">am</option>
<option value="blue">blue</option>
<option value="not">not</option>
<option value="is">is</option>
<option value="big">big</option>
<option value="!">!</option>
</select>
<select id="fourthChanger" class="watchedSelect">
<option value=""> </option>
<option value=".">.</option>
<option value="I">I</option>
<option value="am">am</option>
<option value="blue">blue</option>
<option value="not">not</option>
<option value="is">is</option>
<option value="big">big</option>
<option value="!">!</option>
</select>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
jQuery(function($){
$('.watchedSelect').on('change', function() {
var first = $('.firstSelect').val();
var second = $('.secondSelect').val();
var third = $('.thirdChanger').val();
var fourth = $('.fourthChanger').val();
var phrase = $first + ' ' + section + '' + third + '' + fourth;
if( phrase == 'i am blue' ) {
$('body').css('background', 'blue');
}
else if( phrase == 'i am not blue' ) {
$('body').css('background', 'black');
}
})
})
</script>