jquery - addClass() 成功，更改未应用于页面元素

Question

你好，

我有一个 html 表单，我想在特定时间验证它:

• 在输入的 focusin() 事件上；
• 在输入的 focusout() 事件上；
• 点击提交输入时；
• 等等

例如，我可以在触发 focusIn() 事件时将 CSS 类“selected”添加到输入，但输入不会在视觉上发生变化以反射(reflect)添加的类。我测试了是否添加了该类，hasClass("selected") 返回 TRUE。

在尝试了几个小时的不同方法并在互联网上到处搜索之后，我无法弄清楚为什么要添加该类，但页面在视觉上没有变化。

---

我不认为这是我导入 css 和 javascript 的方式的问题。

head中导入style.css如下:

<style rel="stylesheet" type="text/css">@import url("../css/style.css");</style>

在head中引入jQuery和script.js如下:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>

Here is a functioning codepen for the page.

---

感谢任何帮助。

Answer 1

为了达到预期的结果，使用下面的选项为 .selected 类添加更具体的 CSS

.form1 p input.selected {
    border-left-width: 8px;
}

https://codepen.io/nagasai/pen/borGvB