javascript - 检查选择的内容以更改 CSS 属性
问题描述
我正在制作一个网站,您可以在其中使用多个选择选项来创建句子。我希望能够检测到用户何时更改它们以创建一些特定的句子,例如“I”、“Am”、“Blue”将颜色更改为蓝色。事实上,这只是一个选项,我想列出几个动作,“我很大”,“我在旋转”,并且每次都做不同的事情,所以我尝试了这个:
$('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-\u005a\u0061-\u007a\u00aa-\u00b5\u00ba-\u00c0\u00c1-\u00d6\u00d8-\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);
}
$(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++;
});
});
@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;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<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>
</body>
解决方案
如果你想检查它是否相等,你可以phrase = "Is big"
将变量设置为相等 use 。parse
"Is big"
phrase === "Is big"
完整版:
$('select').on('change', function() {
console.log(phrase);
if (phrase === "Is big"){
$(".white").css('font-size', '5em');
}
});
推荐阅读
- flutter - 使用搜索框进行 Google 搜索自动填充
- mongodb - 有没有办法在 mongoDB 中获取日志以及用户 ip 地址的任何操作?
- visual-studio - 构建后事件命令行:xcopy ERROR
- elasticsearch - 无法在弹性 7.5.1 中启动 Packetbeat
- jquery - 如何制作平滑的块外观?
- javascript - 根据单选按钮选择打开下拉菜单
- java - 防止 Spring Boot 缓存文件
- javascript - List.js 搜索对象?
- java - 使用 tess4j 库的 Tesseract OCR
- ubuntu-16.04 - ROS-Kinetic:无效标签:无法加载命令参数:命令返回代码 [1]