>source

이것은 진지하게 'HTML/JS에 대한 나의 첫 번째 균열' 종류의 쿼리입니다.

무엇을 하려고 합니까?
'체크리스트' 역할을 하는 콘텐츠가 있는 간단한 웹페이지를 만들고 있습니다. 예 -아래 내 code에서 '예제 1'을 완료했으므로 클릭하고 클릭하면 해당 섹션의 배경이 다른 색상으로 바뀝니다.

무슨 문제
내가 겪고 있는 문제는 스타일을 지정하기 위해 CSS 클래스/ID를 추가할 때 사용 중인 JS가 작동하지 않는다는 것입니다. 그것은 베어본 'li' 태그일 때만 작동합니다.

이 질문을 게시하기 위해 아이러니하게도; 별도의 .js 파일에서 스크립트 내용을 가져 와서 html로 추가하면 둘 다 작동하지 않는 것 같습니다 ...

JS는 가장 경험이 적은 분야입니다. 누군가가 아래 code에 대한 포인터를 갖고 있습니까?

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

CSS 클래스가 선택되고 마우스 오버가 정의되는 위치는 어디입니까? 아마도 listitem 클래스는 훨씬 나중에 스타일시트에 정의되어 선택한 클래스에 의해 적용된 스타일을 재정의할 수 있습니다.

Terry2022-01-29 09:27:13

특정 문제처럼 들립니다.

epascarello2022-01-29 09:27:13

죄송합니다. 게시물에서 놓친 것을 방금 깨달았습니다. 이제 편집하고 추가했습니다!

joebreaker2022-01-28 11:56:24
  • 이전 xml : 1.0에서 XSD 1.1로 전환하는 방법은 무엇입니까?
  • 다음 javascript : MongoDB 데이터를 반복하면 '정의되지 않음'이 반환됩니다.