單擊影像時需要顯示隱藏文本-有解無憂

我正在一個有多個影像的網站上作業。用戶可以單擊此影像，然后它將在此影像下顯示一個小文本。我的想法是獲取影像的 ID，然后顯示與該影像對應的文本。

讓我告訴你我的代碼

function SOE() {
  let bSOE = document.getElementById("bSOE");
  let Soe = document.getElementById("SOE");
  if (getComputedStyle(Soe).display != "none") {
    Soe.style.display = "none";
  } else {
    var elements = document.getElementsByClassName("secret");
    for (var i = 0; i < elements.length; i  ) {
      if (elements[i].id != "SOE") {
        elements[i].style.display = "none";
      }
    }
    Soe.style.display = "block";
  }
}

<div class="mn_bo3">
  <div class="map" id="bSOE" onclick="SOE()" style="background-image: url('source/Soe.png')"></div>
  <div class="map" id="bTG" style="background-image: url('source/tg.png')"></div>
  <div class="map" id="bDER" style="background-image: url('source/Der.png')"></div>
  <div class="map" id="bZNS" style="background-image: url('source/Zns.png')"></div>
  <div class="map" id="bGK" style="background-image: url('source/Gk.png')"></div>

</div>

<!--Tiny hidden text -->
<div class="secret" id="SOE" style="display:none;">
  <p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>

所以我創建了一個函式，但它只為一個函式作業，它不使用這個 ID。我需要一些幫助，否則這段代碼會很枯燥。

非常感謝您閱讀！

uj5u.com熱心網友回復：

檢查此代碼以查看它是否解決了您的問題。

function SOE(selector) {
    $('p').fadeOut(500)
    $('#' selector ' > p').fadeIn(500)
}

.mn_bo3 {
    height: 100vh;
    display: flex;
    justify-content: space-between;
}

.map {
    height: 100px;
    width: 100px;
    background-repeat: no-repeat;
    background-size: contain;

    position: relative;
}

p {
    position: absolute;
    bottom: -2em;
    left: 0;
    right: 0;
    text-align: center;
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mn_bo3">
        <div class="map" id="bSOE" onclick="SOE('bSOE')" style="background-image: url('1.png')">
            <p>Text image 1</p>
        </div>
        <div class="map" id="bTG" onclick="SOE('bTG')" style="background-image: url('2.png')">
            <p>Text image 2</p>
        </div>
        <div class="map" id="bDER" onclick="SOE('bDER')" style="background-image: url('3.png')">
            <p>Text image 3</p> 
        </div>
        <div class="map" id="bZNS" onclick="SOE('bZNS')" style="background-image: url('4.png')">
            <p>Text image 4</p>
        </div>
        <div class="map" id="bGK" onclick="SOE('bGK')" style="background-image: url('1.png')">
            <p>Text image 5</p>
        </div>

    </div>

uj5u.com熱心網友回復：

您可以在 onClick 函式呼叫中傳遞每個 div 的 id，如下所示：

JS：

function SOE(id){
    let bSOE = document.getElementById(id);
    ... 
}

HTML：

<div  class="map" id="bSOE" onclick="SOE('bSOE')" style="background-image: url('source/Soe.png')" ></div>

或者，如果保證每個物件都有一個 ID，您可以通過“this”物件獲取 id（js 保持不變）：

<div  class="map" id="bSOE" onclick="SOE(this.id)" style="background-image: url('source/Soe.png')" ></div>

之后，您可以創建一個物件，該物件將影像 id 與文本 id 一起保存：

var elements = { "BSOE": "SOE" }

然后為每個影像顯示相應的文本：

function SOE (id) {
    var elem = document.getElementById(elements[id]);
    elem.style.display = "block";

uj5u.com熱心網友回復：

您可以為所有影像創建一個通用click處理程式，并顯示帶有接受影像的隱藏文本。

所以在這種情況下，您的代碼結構將如下所示

<div class="map" id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)"></div>
<div class="secret" id="bSOE_text">
  <p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>

作業代碼

顯示代碼片段

function onElementClick(event){
  //Before showing div hide other's one 
  [...document.querySelectorAll('div.secret')].forEach(el => el.style.display = 'none');
  //To show the repective div
  document.querySelector('div#'   event.id   '_text').style.display = 'block';
}

.map {
    height: 100px;
    width: 100px;
    background-size: cover;
    order: 1px solid;
    margin: 10px;
}
.secret {
  display: none;
}

<div class="mn_bo3">
    <div  class="map" id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)" ></div>
  <div class="secret" id="bSOE_text">
      <p>Here are the list of the easter eggs of Shadow of Evil map :</p>
  </div>
    <div class="map" id="bTG" style="background-image: url(https://picsum.photos/200
)"  onclick="onElementClick(this)"></div>
  <div class="secret" id="bTG_text">
      <p>Here are the list of the easter eggs of Shadow of Evil map :</p>
  </div>
    <div class="map" id="bDER" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
  <div class="secret" id="bDER_text">
      <p>Here are the list of the easter eggs of Shadow of Evil map :</p>
  </div>
    <div class="map" id="bZNS" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
   <div class="secret" id="bZNS_text">
      <p>Here are the list of the easter eggs of Shadow of Evil map :</p>
  </div>
    <div class="map" id="bGK" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
 <div class="secret" id="bGK_text">
      <p>Here are the list of the easter eggs of Shadow of Evil map :</p>
  </div>    
</div>

uj5u.com熱心網友回復：

當您堅持將 Javascript 功能用于用戶點擊您的圖片的其他目的時，我建議您檢查其他答案并自行選擇。

當您正在尋找一個簡單的解決方案時，您可能希望使用<details><summary>構造進行調查，因為這些元素默認包含點擊顯示機制，而無需 Javascript。

看看這個簡單的片段：

/* [OPTIONAL], but makes sense in this case */
summary { list-style-type: none }

/* just extra eye-candy */
body    { padding: 1rem; margin: 0; cursor: default }
summary { cursor: pointer }

<details>
  <summary><img src="https://picsum.photos/360?random=1"></summary>
  <p>some tiny text when the image gets clicked</p>
</details>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/497766.html

標籤：javascript html 展示干燥

上一篇：如何在reacatjs中打開和關閉搜索欄？

下一篇：撰寫此代碼的更好、更簡潔的方式？