[実戦]JSを使用してHTMLを処理(1)

13303 ワード
JavaScript テキストリンク

To Do Listの適用

  • To Do List項目で完了する項目に線を引き、完了状態
    • を表示する
    <html>
  <head>
    <title>투두리스트</title>
    <style>
   	  .done{
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <h1>What to do</h1>
      <ul id="list">
        <li class="item">로그인 구현</li>
        <li class="item">회원 인증 구현</li>
        <li class="item">블로그 작성하기</li>
        <li class="item">강아지랑 산책하기</li>
      </ul>
    </div>
  </body>
</html>

    1.リストに変更がない場合

    const list = document.querySelector('#list');

for(let item of list.children) {
  item.addEventListener('click', function(e) {
    e.target.classList.toggle('done'); // 완료한 항목에 'done' 클래스 추가
  });
}

    2.リスト内の変更

  • イベントハンドラは
    • を再登録する必要がある.
    const list = document.querySelector('#list');

for(let item of list.children) {
  item.addEventListener('click', function(e) {
    e.target.classList.toggle('done'); // 완료한 항목에 'done' 클래스 추가
  });
}

// 새로운 리스트 생성
const li = document.createElement('li');
li.classList.add('item');
li.textContent = '친구랑 카페가기';

// 새로 생성한 li 요소를 기존 리스트의 자식 요소로 추가
list.append(li);
    委任
  • イベント解決策:親要素にイベントハンドラを登録すると、すべてのサブ要素のイベントハンドラが
    • を実行します.
    委任
  • イベントの場合、条件文によって
    • が処理され、サブエレメントで動作する
    const list = document.querySelector('#list');

// 부모 요소에 이벤트 핸들러 위임

list.addEventListener('click', function(e) {
  if(e.target.classList.contains('item')) {
  	e.target.classList.toggle('done');
  }
});

// 새로운 리스트 생성
const li = document.createElement('li');
li.classList.add('item');
li.textContent = '친구랑 카페가기';

// 새로 생성한 li 요소를 기존 리스트의 자식 요소로 추가
list.append(li);
    QuasarのQTable :究極のコンポーネント( 3/6 ) -読み込み状態、ページネーション、および並べ替え
    Firebase通知を使用する必要がありますか?