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

Question

我有一个文本框：

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

我想查看该复选框的内容是否是我的促销代码“学生”，如果没有，那么我将使用伪类，比如#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');
    }
});