所以我做了一个部分，当你把鼠标悬停在一张图片上时，在电脑和笔记本电脑上会出现一个div和一些文本。我做了这个，它很好用，但是当我看手机版的时候，我忘了你不能在手机上悬停。所以我想最好的办法可能是当你点击图片时，div会出现。
这就是问题开始的地方。我正在使用shopify，所以它需要动态的灯光编辑器。
正如你所看到的，我尝试了一些javascript的东西，试图用css添加类，我不知道什么是最好的方法来做到这一点，所以如果有人能帮助我非常感谢。
编辑：我将ID选择器更改为类选择器，并在JavaScript中尝试了一些新的东西。
这里是我的代码：

<div class="uspContainer"> 
  {% for block in section.blocks %}
  
  <div class="uspTextContainer bigScreen">
    <div class="uspIcon">
      {% if block.settings.image != blank %}
         <img src="{{ block.settings.image | img_url: '100x100'}}" alt="img" class="uspIconImg"> 
           {% else %}
              {% capture current %}{% cycle 1,2 %}{% endcapture %}
      {% endif %}
    </div>
    <p class="uspText">{{ block.settings.text }}</p>
  </div>

    <div class="uspTextContainer smallScreen">
    <div class="uspIcon">
      {% if block.settings.image != blank %}
         <img src="{{ block.settings.image | img_url: '100x100'}}" alt="img" class="uspIconImg"> 
           {% else %}
              {% capture current %}{% cycle 1,2 %}{% endcapture %}
      {% endif %}
    </div>
    <p class="uspTextTwo hidden">{{ block.settings.text }}</p>
  </div>
  
  {% endfor %}
</div>

<style>

  @media only screen and (max-width: 800px) {
  .bigScreen {
    display: none !important;
  }
}

  @media only screen and (min-width: 800px) {
    .smallScreen {
      display: none !important;
    }
  }

  .uspContainer 
    {
      display: flex;
    }
  
  .uspTextContainer {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 50%;
    margin: auto;
    margin-bottom: 2%;
  }

  .uspText {
    position: absolute;
    background: rgba(242, 242, 242, 0.72);
    color: black;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    min-width: 15%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 1px;
    padding: 5px;
    top: 50%;
    transform: translateY(-50%);
  }

  .uspTextContainer:hover .uspText {
    visibility: visible;
    opacity: 1;
  }

    .uspTextTwo {
    position: absolute;
    background: rgba(242, 242, 242, 0.72);
    color: black;
    transition: opacity .2s, visibility .2s;
    min-width: 15%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 1px;
    padding: 5px;
    top: 50%;
    transform: translateY(-50%);
  }

  .hidden {
    display: none;
  }
</style>

<script>
const icon = document.querySelectorAll(".uspIcon");
const textTwo = document.querySelectorAll(".uspTextTwo");
const uspContainer = document.querySelectorAll('.uspContainer');

uspContainer.addEventListener("click", (e) => {
    if(e.target.classList.contains('uspIcon')){
          textTwo.classList.remove('hidden');
    }
});
  
  if (uspContainer.classList.contains("smallScreen")) {
    icon.addEventListener("click", function() {
    textTwo.classList.remove("hidden");
  });
}

  icon.addEventListener("click", () => {
    if(textTwo.classList.contains('hidden')){
        textTwo.classList.remove('hidden');
    }
});
</script>

它给了我错误图标。addEventListener不是一个函数+告诉我当我控制台日志时所有变量都是未定义的。