jquery - 检查文本框字符串并根据字符串内容使用CSS伪类

Question

我有一个文本框:

<input type = "text" name = "promo" class = "promobox" id = "promobox" placeholder= "PROMO CODE" />

我想检查该复选框的内容是否是我的促销代码“student”，如果不是，那么我将使用一个伪类，例如，#promobox:badCode{} ，如果匹配，那么我将使用 #promobox:goodCode{}

这是我目前在我的脚本标签中的内容:

$('promobox').keyup(onchange() {
    if ($("#promobox").val() != "student") {
        $(this).addClass("badCode");
    } else {
        $(this).addClass("goodCode");
    }
});

Answer 1

几个语法问题。您在第一个选择器中缺少 #，onchange 应该是 function。

在好/坏之间转换时还需要删除相反的类

尝试:

$('#promobox').keyup(function(){
   var $this= $(this); // cache $(this);

    if( $this.val() != "student"){
        $this.addClass("badCode").removeClass('goodcode');
    }else{
        $this.addClass("goodCode").removeClass('badcode');
    }
});