jQuery

Question

我的表格有点问题。我想让用户下载一个 Presskit.zip 文件。

但在下载之前，他们必须在输入文本中输入单词 'presskit'。

如果'presskit'这个词是正确的，那么我想在下载按钮上添加一个class。

但这似乎不起作用。有人可以告诉我我做错了什么吗？

Here's a example:

希望有人能帮助我:)

谢谢。

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;
}

Answer 1

Try this
$('input').keyup(function() {
if($(this).val()=="presskit"){
    $('.btn').toggleClass('active');}
});

Answer 2

您好，我正在创建演示。

$('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');
    }
});

Answer 3

您可以比较文本，然后允许用户下载 link。请看下面的代码。

$('input').on('blur, keyup', function() {
if($(this).val()=='PRESSKIT' && $(this).val()!='')
$('.btn').toggleClass('active');
else
 $('.btn').removeClass('active');  
});

jQuery - 如果输入文本等于答案，则添加 class

jQuery - Add class if input text is equal to answer

html

css

addclass