使用纯JavaScript，请根据Swatch活动类和数据选择选项隐藏一个元素？

Question

我正在尝试显示一个文件上传按钮仅适用于“测试产品”页面中的一个名为“自定义徽标”的样本选项在这里。

下面的我的代码不完整，因为我发现很难读取data-swatch-option属性的值，并查找span是否有一个名为swatch的类 - Active指示选择了相关的色板。

<span data-swatch-option="Custom Logo" data-swatch-index="6947439312956-0" data-booster-initd="true" class="swatch--active">Custom Logo</span>

  // Show File Upload button only if Custom Logo variant is clicked/active.
  const el = document.querySelectorAll('span');
  window.onload = function() {
    setTimeout(function() {
      console.log(JSON.stringify(input));
      document.getElementById('hulkapps_option_list_6947439312956').style.display = 'none';
      for (var i = 0; i < el.length; i++) {
        const current = el[i];
        el[i].addEventListener("click", function (e) {
          if(current.dataset.swatchOption == 'Custom Logo'){
            document.getElementById('hulkapps_option_list_6947439312956').style.display = 'block';
          }else{
            document.getElementById('hulkapps_option_list_6947439312956').style.display = 'none';
          }
        });
      }
    }, 2000);
  };

Answer 1

这应该对你有用

const el =  document.querySelectorAll('.type')
const input = document.getElementsByClassName('uploader')

input[0].style.display = 'none'

for (var i = 0; i < el.length; i++) {
  const current = el[i]
    el[i].addEventListener("click", function (e) {
    if(current.dataset.swatchOption == 'Custom Logo'){
      input[0].style.display = 'block'
     }else{
      input[0].style.display = 'none'
     }
      
    });
};

span{
border: 1px solid black;
padding: 10px;
}

input{
margin-top: 50px
}

<div class="swatches__holder">
<span class="type" data-swatch-option="Custom Logo" data-swatch-index="6947439312956-0" data-booster-initd="true">Custom Logo</span>
<span class="type" data-swatch-option="Design 1" data-swatch-index="6947439312956-0" data-booster-initd="true" class="swatch--active">Design 1</span>
 <span class="type" data-swatch-option="Design 2" data-swatch-index="6947439312956-0" data-booster-initd="true">Design 2</span>
<span class="type" data-swatch-option="Design 3" data-swatch-index="6947439312956-0" data-booster-initd="true">Design 3</span>
<span class="type" data-swatch-option="Design 4" data-swatch-index="6947439312956-0" data-booster-initd="true">Design 4</span>
<span class="type" data-swatch-option="Design 5" data-swatch-index="6947439312956-0" data-booster-initd="true">Design 5</span>
<span class="type" data-swatch-option="Design 6" data-swatch-index="6947439312956-0" data-booster-initd="true">Design 6</span>
 </div>
 
 <div class="uploader"><input type="file"></div>