addClass（）成功，更改未应用于页面元素

Question

美好的一天，

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

• 关于输入的focusin()事件;
• 关于输入的focusout()事件;
单击提交输入时
• ;
• 等

例如，我可以在触发focusIn()事件时向输入添加一个CSS类＆＃34;选择＆＃34;，但输入不会在视觉上改变以反映添加的类。我测试了是否添加了类，hasClass("selected")返回TRUE。

经过几个小时尝试不同的方法并在互联网上搜索高低之后，我无法弄清楚为什么要添加课程，但页面在视觉上没有变化。

我不认为导入css和javascript的方式存在问题。

style.css导入头部，如下所示：

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

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