jQuery - 如果输入文本等于答案,则添加 class
jQuery - Add class if input text is equal to answer
我的表格有点问题。我想让用户下载一个 Presskit.zip 文件。
但在下载之前,他们必须在输入文本中输入单词 'presskit'。
如果'presskit'这个词是正确的,那么我想在下载按钮上添加一个class。
但这似乎不起作用。有人可以告诉我我做错了什么吗?
希望有人能帮助我:)
谢谢。
HTML
<a href="test.zip" class="btn" download="download">Download Presskit</button>
CSS
.btn {
display:block;
float:left;
padding: 20px;
text-decoration: none;
text-align:center;
background-color: #eee;
color: #fff;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn.active {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
background-color: #34495e;
pointer-events: all;
}
input {
display: block;
float: left;
padding: 22px;
}
Try this
$('input').keyup(function() {
if($(this).val()=="presskit"){
$('.btn').toggleClass('active');}
});
您好,我正在创建演示。
$('input').on('keyup',function() {
if($(this).val()=='PRESSKIT'){
$('.btn').addClass('active');
}else{
$('.btn').removeClass('active');
}
});
.btn {
display:block;
float:left;
padding: 20px;
text-decoration: none;
text-align:center;
background-color: #eee;
color: #fff;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn.active {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
background-color: #34495e;
pointer-events: all;
}
input {
display: block;
float: left;
padding: 22px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="">
<input type="text" class="field-txt" placeholder="Type “PRESSKIT” to start the download.." />
</form>
<a href="test.zip" class="btn" download="download">Download Presskit</button>
如果你想同时 大写和小写 presskit
或PRESSKIT
比习惯这个脚本
$('input').on('keyup',function() {
if(($(this).val()=='PRESSKIT') || $(this).val()=='presskit'){
$('.btn').addClass('active');
}else{
$('.btn').removeClass('active');
}
});
您可以比较文本,然后允许用户下载 link。请看下面的代码。
$('input').on('blur, keyup', function() {
if($(this).val()=='PRESSKIT' && $(this).val()!='')
$('.btn').toggleClass('active');
else
$('.btn').removeClass('active');
});
我的表格有点问题。我想让用户下载一个 Presskit.zip 文件。
但在下载之前,他们必须在输入文本中输入单词 'presskit'。
如果'presskit'这个词是正确的,那么我想在下载按钮上添加一个class。
但这似乎不起作用。有人可以告诉我我做错了什么吗?
希望有人能帮助我:)
谢谢。
HTML
<a href="test.zip" class="btn" download="download">Download Presskit</button>
CSS
.btn {
display:block;
float:left;
padding: 20px;
text-decoration: none;
text-align:center;
background-color: #eee;
color: #fff;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn.active {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
background-color: #34495e;
pointer-events: all;
}
input {
display: block;
float: left;
padding: 22px;
}
Try this
$('input').keyup(function() {
if($(this).val()=="presskit"){
$('.btn').toggleClass('active');}
});
您好,我正在创建演示。
$('input').on('keyup',function() {
if($(this).val()=='PRESSKIT'){
$('.btn').addClass('active');
}else{
$('.btn').removeClass('active');
}
});
.btn {
display:block;
float:left;
padding: 20px;
text-decoration: none;
text-align:center;
background-color: #eee;
color: #fff;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn.active {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
background-color: #34495e;
pointer-events: all;
}
input {
display: block;
float: left;
padding: 22px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="">
<input type="text" class="field-txt" placeholder="Type “PRESSKIT” to start the download.." />
</form>
<a href="test.zip" class="btn" download="download">Download Presskit</button>
如果你想同时 大写和小写 presskit
或PRESSKIT
比习惯这个脚本
$('input').on('keyup',function() {
if(($(this).val()=='PRESSKIT') || $(this).val()=='presskit'){
$('.btn').addClass('active');
}else{
$('.btn').removeClass('active');
}
});
您可以比较文本,然后允许用户下载 link。请看下面的代码。
$('input').on('blur, keyup', function() {
if($(this).val()=='PRESSKIT' && $(this).val()!='')
$('.btn').toggleClass('active');
else
$('.btn').removeClass('active');
});