gpt4 book ai didi

javascript - jquery - 在字段完成时通过单击按钮显示带有 if 语句的框 - 创建测验

转载 作者:行者123 更新时间:2023-11-28 10:19:40 26 4
gpt4 key购买 nike

我拼命想为你创造一些非常简单的东西!

这是我的问题:

我想创建一个小测验,当有人在一个字段中写任何东西时 (),然后单击“确定”按钮(不确定我应该使用 a 还是 a ),然后出现 3 种可能性(对于在每种情况下,字段输入下方都会出现一个框):

  1. 答案准确且书写正确:那么文本将是“干得好!”
  2. 答案几乎是正确的,这意味着单词没有正确书写(如果需要,我们可以定义“几乎是答案”):文本将是“Almost there...”
  3. 答案完全错误,文本将是“再试一次!”

现在我有:

<body>
<div>
<table>
<tbody>
<tr>
<td>To whom it belongs?</td>
</tr>
<tr>
<td>
<img src="#" alt="Tim's coat" width="100%"/>
</td>
</tr>
<tr>
<td class="answer-box">
<input type="text" class="field-answer" placeholder="Write it there!">
<button id="showresult" class="button-answer" value="Ok">OK</button>
</td>
</tr>
<tr>
<td>
<div class="res" id="switch">Great job!</div>
<div class="res" id="switch2">Almost there...</div>
<div class="res" id="switch3">Try again!</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];

$(document).ready(function(){
$('.field-answer').bind('keyup', function(){
if("#showresult").click(function() {
if($.inArray($(this).val().toLowerCase().trim().replace(/[^\w\s\-\_!@#\$%\^\&*\\")\(+=._-]/g, ''), artist) >= 0){
$('#switch').show('good');
}
else if($.inArray($(this).val().toLowerCase().trim().replace(/[^\w\s\-\_!@#\$%\^\&*\\")\(+=._-]/g, ''), almostartist) >= 0){
$('#switch2').addClass('soso');
if{
$('#switch3').addClass('non');
}
else {
$('#switch3').removeClass('non');
}
});
});
}
</script>

但这当然行不通......

以防万一,我的 CSS 在这里:

    .res {
display: none;
color: white;
font-weight: bold;
text-align: center;
background-color: #490058;
height: 75px;
max-width: 100%;
line-height: 70px;
font-size: 140%;
}

.res.good {
display: block;
}

.res.soso {
display: block;
}

.res.non {
display: block;
}

.answer-box {
text-align: center;
}

.button-answer {
border: none;
background-color: #490058;
color: white;
font-size: 120%;
font-weight: bold;
padding: 8px;
left: 260px;
}

.field-answer {
text-align: center;
border: none;
border-bottom: 2px solid black;
background-color: transparent;
max-width: 230px;
height: 40px;
font-size: 20px;
text-transform: uppercase;
outline: 0;
}

有人可以帮我解决这个问题吗?我很确定我不远,但无法解决...

如果您需要更精确的东西,请不要犹豫! ;)

谢谢大家!

巴蒂斯特

最佳答案

略有不同的方法 - 并不比任何其他建议更好 - FIDDLE .

JS

var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];

$('.field-answer').focus(function(){
$('.res').css('display', 'none');
$(':input').val('');
});

$('#showresult').on('click', function(){
useranswer = $('.field-answer').val();
useranswer = useranswer.toLowerCase().trim().replace(/[^\w\s\-\_!@#\$%\^\&*\\")\(+=._-]/g);
if( $.inArray( useranswer, artist ) === 0 )
{
$('#switch1').css('display', 'block');
}
else if ( $.inArray( useranswer, almostartist ) >= 0 )
{
$('#switch2').css('display', 'block');
}
else //if ( $.inArray( useranswer, almostartist ) < 0 )
{
$('#switch3').css('display', 'block');
}
});

关于javascript - jquery - 在字段完成时通过单击按钮显示带有 if 语句的框 - 创建测验,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24083947/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com