複数のボタンにclickEventを適用

74018 ワード
JavaScript JavaScript おもちゃの計画 テキストリンク
必要な機能
1.領域名のボタンをクリックし、該当する画像を画面に出力する
2.画面出力時に不透明度アニメーションを与える
3.画面に画像を出力する場合は、他のボタンをクリックして既存の画像を
クリックしたボタンが消えて画像が出力されます.
HTML
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="dist/css/style.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"
    integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous" />
  <title>잘난골목</title>
</head>

<body>
  <header>
    <div class="header-title">잘난 골목</div>
    <ul class="title-list">
      <li class="js-title-click" id="gangnam">강남</li>
      <li class="js-title-click" id="hongdae">홍대</li>
      <li class="js-title-click" id="hyehwa">혜화</li>
      <li class="js-title-click"  id="ehwa">이화</li>
      <li class="js-title-click" id="ilsan">일산</li>
    </ul>
  </header>
  <article class="post-appear">
    <div class="post-list" id="js-gangnam">
      <h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
      <ul>
        <li>
          <a href="html/first.html"> <img class="imagesize" src="image/post-1.jpg" alt=""></a>
        </li>
        <li>
          <a href="#"> <img class="imagesize" src="image/post-1.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-1.jpg" alt=""></a>

      </ul>
      <ul>
        </li>
        <li><a href="#"><img class="imagesize" src="image/post-1.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-1.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-1.jpg" alt=""></a>

        </li>
      </ul>

    </div>
    <div class="post-list" id="js-hongdae">
      <h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
      <ul>
        <li>
          <a href="html/first.html"> <img class="imagesize" src="image/post-2.jpg" alt=""></a>
        </li>
        <li>
          <a href="#"> <img class="imagesize" src="image/post-2.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-2.jpg" alt=""></a>

      </ul>
      <ul>
        </li>
        <li><a href="#"><img class="imagesize" src="image/post-2.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-2.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-2.jpg" alt=""></a>

        </li>
      </ul>

    </div>
    <div class="post-list" id="js-hyehwa">
      <h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
      <ul>
        <li>
          <a href="html/first.html"> <img class="imagesize" src="image/post-3.jpg" alt=""></a>
        </li>
        <li>
          <a href="#"> <img class="imagesize" src="image/post-3.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-3.jpg" alt=""></a>

      </ul>
      <ul>
        </li>
        <li><a href="#"><img class="imagesize" src="image/post-3.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-3.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-3.jpg" alt=""></a>

        </li>
      </ul>

    </div>
    <div class="post-list" id="js-ehwa">
      <h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
      <ul>
        <li>
          <a href="html/first.html"> <img class="imagesize" src="image/post-4.jpg" alt=""></a>
        </li>
        <li>
          <a href="#"> <img class="imagesize" src="image/post-4.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-4.jpg" alt=""></a>

      </ul>
      <ul>
        </li>
        <li><a href="#"><img class="imagesize" src="image/post-4.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-4.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-4.jpg" alt=""></a>

        </li>
      </ul>

    </div>
    <div class="post-list" id="js-ilsan">
      <h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
      <ul>
        <li>
          <a href="html/first.html"> <img class="imagesize" src="image/post-5.jpg" alt=""></a>
        </li>
        <li>
          <a href="#"> <img class="imagesize" src="image/post-5.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-5.jpg" alt=""></a>

      </ul>
      <ul>
        </li>
        <li><a href="#"><img class="imagesize" src="image/post-5.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-5.jpg" alt=""></a>

        </li>
        <li><a href="#"><img class="imagesize" src="image/post-5.jpg" alt=""></a>

        </li>
      </ul>

    </div>

  </article>

  <script src="titleClick.js"></script>
</body>

</html>
javascript
function removeShow() {
   const postList = document.querySelectorAll('.post-list');
   postList.forEach(span => {
       span.classList.remove('show');
   })
}
function clickEvent(event) {
   const targetId = event.target.id;
   if (targetId === 'gangnam') {
       const gangnamImg = document.getElementById('js-gangnam');
       gangnamImg.classList.toggle('show');
       if (gangnamImg.classList.contains('show')) {
           removeShow();
           gangnamImg.classList.toggle('show');
       }
   } else if (targetId === 'hongdae') {
       const hongdaeImg = document.getElementById('js-hongdae')
       hongdaeImg.classList.toggle('show');
       if (hongdaeImg.classList.contains('show')) {
           removeShow();
           hongdaeImg.classList.toggle('show');
       }
   } else if (targetId === 'hyehwa') {
       const hyehwaImg = document.getElementById('js-hyehwa')
       hyehwaImg.classList.toggle('show');
       if (hyehwaImg.classList.contains('show')) {
           removeShow();
           hyehwaImg.classList.toggle('show');
       }
   } else if (targetId === 'ehwa') {
       const ehwaImg = document.getElementById('js-ehwa')
       ehwaImg.classList.toggle('show');
       if (ehwaImg.classList.contains('show')) {
           removeShow();
           ehwaImg.classList.toggle('show');
       }
   } else {
       const ilsanImg = document.getElementById('js-ilsan')
       ilsanImg.classList.toggle('show');
       if (ilsanImg.classList.contains('show')) {
           removeShow();
           ilsanImg.classList.toggle('show');
       }
   }
}
function init() {
   const titleClick = document.querySelectorAll('.js-title-click');
   for (const title of titleClick) {
       title.addEventListener('click', clickEvent);
   }
}
init();
説明:
村の名前に共通するclassを1つずつクリックして活動します.
クリックしたコンテナごとにidが条件文として同じidを持つ場合のみ
切り替え関数を使用してshowクラスを追加します.
showを追加した場合、post-listクラスを持つすべてのコンテナからshowクラスを削除します.
コンテナからshow(クリックした自分以外)を削除しようとしたのですが、jqueryに関する内容しか表示されませんでした.
私が選んだのは、すべてのshowクラスを削除し、選択したボタンのクラスにshowを追加することです.
過去の痕跡
const liPost1 = document.getElementById('lipost-1');
const liPost2 = document.getElementById('lipost-2');
const liPost3 = document.getElementById('lipost-3');
const liPost4 = document.getElementById('lipost-4');
const liPost5 = document.getElementById('lipost-5');
const imgArray = ['post-1', 'post-2', 'post-3', 'post-4', 'post-5'];

function toggleEvent(post) {
    let postImg = document.getElementById(post);
    if (postImg.classList.contains('remove')) {
        postImg.classList.remove('remove');
    }
    postImg.classList.toggle('show');
    if (!postImg.classList.contains('show')) {
        postImg.classList.toggle('remove');
    }
}
function printPost(event) {
    const target = event.target;
    const tarId = target.id;
    if (tarId === 'lipost-1') {
        toggleEvent('post-1');

    } else if (tarId === 'lipost-2') {
        toggleEvent('post-2');
    } else if (tarId === 'lipost-3') {
        toggleEvent('post-3');
    } else if (tarId === 'lipost-4') {
        toggleEvent('post-4');
    } else {
        toggleEvent('post-5');
    }
}
以前も今とあまり差はありませんでしたが、idの名前やclassの名前を数字で表すので、あまりよくありません.
次に条件文ではtoggleEventにパラメータpost-numberを付与することによりpost-numberを持つcontainerを指定し,removeとshowを追加する関数を記述した.
しかし、ここに問題が発生しました.
問題は、ボタンをクリックすると画像がはっきり見えるが、他のボタンをクリックすると
問題は、既存のイメージのshowレベルが依然として存在することだ.
再度ボタンをクリックすると、画像は消えますが、前にクリックした画像はshowクラスが残っているので、画像が消えないのが問題です.
**したがって、showクラスを追加し、他のすべてのpost-listからshowを削除してからshowを追加し、他のボタンをクリックしても画像が保持される問題を解決します.
しかし、これが一番だとは思いません.
今不満なのは、このように条件文を書いて、ショーtoggleを2回書く必要があると思います.
もっといい方法があると思いますが、今は知識が足りないようです.もっと勉強して、やり直しましょう.**
[白俊]200061号モノラルモノラルモノラルダブルチャネル
[Codility Lessons] 2. Arrays - CyclicRotation