为什么我的班级名称没有改变和移动范围

Question

我用JS和HTML创建了我认为非常简单的代码。当用户开始输入文本框时，我希望.clearBtn更改它的className，然后向左滑动。为什么没有发生？

http://jsfiddle.net/qgy8Ly5L/

我的JS：

function checkInput(text) {

    if (text != null || text != "") {
    $("#clearBtn1").addClass("show");

    }

}

Answer 1

替换

.clearBtn show {
    left: -15px;
}

到

.show {
    left: -15px;
}

在css中

JSFiddle

Answer 2

现在有CSS个show个班级。它应该是

.show {
    left: -15px;
}

而不是

.clearBtn show {
    left: -15px;
}

function checkInput(text) {
    if (text) {
        $("#clearBtn1").addClass("show");
    }
}

.clearBtn {
    position: relative;
    left: 0;
}
.show {
    left: -15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input type="text" onkeyup="checkInput(this.value)" />
<span id="clearBtn1" class="clearBtn">X</span>

Answer 3

根据我的理解，当前代码存在两个问题。

1.您首先需要删除“.clearbutton”

类

2.应使用比较运算符，如下面的代码

所以你可以试试这个：

function checkInput(text) {
if (text !== null || text !== "") {
$("#clearBtn1").removeClass("clearBtn");
$("#clearBtn1").addClass("show");
  }
}

和css类show类似：

. show {
left: -15px;
 }

demo fiddle