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

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

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

如果“ presskit”一词正确，那么我想向下载按钮添加一个类。

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

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

最佳答案

您好，现在尝试以这种方式创建演示。

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