添加 CSS 时 JS 颜色更改停止工作

Question

这是一个严肃的“我对 HTML/JS 的第一次破解”类型的查询。

我想做什么？
我正在构建一个简单的网页，其中包含充当“清单”的内容。 例如 - 在我下面的代码中，您已经完成了“示例 1”，因此您单击它，然后 onclick 它应该将该部分的背景变成不同的颜色。

出了什么问题
我遇到的问题是，当我添加 CSS 类/ID 来设置它的样式时，我正在使用的 JS 不起作用。 它仅在它是一个简单的“li”标签时才有效。

具有讽刺意味的是，为了发布这个问题； 当我从单独的.js 文件中获取脚本内容并将其添加到 html 中时，似乎都不起作用......

JS 是我经验最少的领域，有人对以下代码有任何指示吗（非常快速地模拟随机内容，而不是实际页面）。

 //COLOUR CHANGE ON-CLICK AND MOUSE HOVER $(document).ready(function() { $('li').on('click', function() { $(this).toggleClass('selected'); }); $('li').on('mouseenter', function() { $(this).toggleClass('mouseover') }); $('li').on('mouseleave', function() { $(this).toggleClass('mouseover') }); });

 .container { background-color: #0375B4; margin-bottom: 20px; }.listitem { border: 1px; background: #E2F2FF; margin: 10px; padding: 9px; font-size: 23px; list-style-type: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col"> <ul> <li class="listitem">example 1</li> <li class="listitem">example 2</li> <li class="listitem">example 3</li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="col"> <ul> <li>example 1</li> <li>example 2</li> <li>example 3</li> </ul> </div> </div> </div>

Answer 1

添加缺少的selected类，“鼠标悬停”。 然后你会看到你的代码完美运行。

仅选择添加 class 的工作示例

 $(document).ready(function() { console.log(1) $('li').on('click', function() { $(this).toggleClass('selected'); }); $('li').on('mouseenter', function() { $(this).toggleClass('mouseover') }); $('li').on('mouseleave', function() { $(this).toggleClass('mouseover') }); });

 .container { background-color: #0375B4; margin-bottom:20px; }.listitem { border: 1px; background: #E2F2FF; margin: 10px; padding: 9px; font-size: 23px; list-style-type: none; }.selected { color:red; } li { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div class="container"> <div class="row"> <div class="col"> <ul> <li class="listitem">example 1</li> <li class="listitem">example 2</li> <li class="listitem">example 3</li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="col"> <ul> <li>example 1</li> <li>example 2</li> <li>example 3</li> </ul> </div> </div> </div> <style> </style> <script> //COLOUR CHANGE ON-CLICK AND MOUSE HOVER </script>

Answer 2

添加样式

 //COLOUR CHANGE ON-CLICK AND MOUSE HOVER $(document).ready(function() { $('li').on('click', function() { $(this).toggleClass('selected'); }); $('li').on('mouseenter', function() { $(this).toggleClass('mouseover') }); $('li').on('mouseleave', function() { $(this).toggleClass('mouseleave') }); });

 .container { background-color: #0375B4; margin-bottom: 20px; }.listitem { border: 1px; background: #E2F2FF; margin: 10px; padding: 9px; font-size: 23px; list-style-type: none; }.listitem.selected { background: red; }.listitem.mouseover { background: green; }.listitem.mouseleave { background: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col"> <ul> <li class="listitem">example 1</li> <li class="listitem">example 2</li> <li class="listitem">example 3</li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="col"> <ul> <li>example 1</li> <li>example 2</li> <li>example 3</li> </ul> </div> </div> </div>

Answer 3

您必须添加 styles 才能将“选定”应用于元素：

.selected {
  background-color: red;
}

一旦单击 li 元素，它就会“选择” css class 和新元素。 样式将被应用。 再次单击时，它将被删除。 更准确地说，根据您开发代码的程度，styles 应该更详细地指定元素。 大概会是：

li.selected {...}

或者

.listitem.selected {...}

顺便提一句。 当鼠标悬停在带有 JS 的元素上时，而不是切换 class 您可以仅使用 CSS 获得相同的效果：

li:hover {
  background-color: yellow;
}