添加CSS時JS顏色更改停止作業

這是一個嚴肅的“我對 HTML/JS 的第一次破解”型別的查詢。

我想做什么？
我正在構建一個簡單的網頁，其中包含充當“清單”的內容。例如 - 在我下面的代碼中，您已經完成了“示例 1”，因此您單擊它，然后單擊它應該將該部分的背景變成不同的顏色。

出了什么
問題我遇到的問題是，當我添加 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>

uj5u.com熱心網友回復：

添加缺少的類selected，“滑鼠懸停”。然后你會看到你的代碼完美運行。

僅選擇添加類的作業示例

        $(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>

uj5u.com熱心網友回復：

添加樣式

//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>

uj5u.com熱心網友回復：

您必須為要應用于元素的“選定”添加樣式：

.selected {
  background-color: red;
}

一旦您單擊 li 元素，它就會“選擇”css 類和新的。樣式將被應用。再次單擊時，它將被洗掉。更準確地說，取決于您開發代碼的程度，樣式應該更詳細地指定元素。大概會是：

li.selected {...}

或者

.listitem.selected {...}

順便提一句。當滑鼠懸停在帶有 JS 的元素上時，您可以僅使用 CSS 獲得相同的效果，而不是切換類：

li:hover {
  background-color: yellow;
}

標籤：

上一篇：CSSGrid：在特定列中定位網格項

下一篇：使用JQuery單擊子元素時更改父元素的CSS