函数 onchange select 仅更改 div 中的第一个元素

Question

我想通过 select(onchange) 更改不同商店的价格。每个商店作为一个产品 div 和包含不同价格结构的产品，我想根据您选择的商店显示或隐藏这些价格结构。

目前，价格仅在第一个产品中发生变化。我认为这可能是一个 loop/array 问题，但我没有尝试过，但没有任何效果。

我的页面中确实有 JQuery，所以 JQuery 的解决方案很好。

 function priceStore(){
  var option = document.getElementById("Store").value;
  
      if((option=="Store1")||(option=="Store3")){
        const elements = document.querySelectorAll(".product");
        elements.forEach(function (element) {
          document.getElementsByClassName('price1')[0].style.display = 'block';
          document.getElementsByClassName('price2')[0].style.display = 'none';
          document.getElementsByClassName('price3')[0].style.display = 'none';
        });
      }
      
      
      if((option=="Store2")||(option=="Store4")|| (option=="Store5")){
        const elements = document.querySelectorAll(".product");
        elements.forEach(function (element) {
          document.getElementsByClassName('price1')[0].style.display = 'none';
          document.getElementsByClassName('price2')[0].style.display = 'block';
          document.getElementsByClassName('price3')[0].style.display = 'none';
        });
      }
      
      if((option=="Store6")){
        const elements = document.querySelectorAll(".product");
        elements.forEach(function (element) {
          document.getElementsByClassName('price1')[0].style.display = 'none';
          document.getElementsByClassName('price2')[0].style.display = 'none';
          document.getElementsByClassName('price3')[0].style.display = 'block';
        });
      }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data">

<select name="Store" id="Store" onchange="priceStore()"> 
<option disabled selected value="">choose store</option>
<option value="Store1">Store1</option>
<option value="Store2">Store2</option>
<option value="Store3">Store3</option>
<option value="Store4">Store3</option>
<option value="Store5">Store3</option>
<option value="Store6">Store3</option>
</select>


  <div class="productrange">
    <div class="product product1">
      <h2>Product 1</h2>
      <div class="price1">price1</div>
      <div class="price2">price2</div>
      <div class="price3">price3</div>
    </div>

    <div class="product product2">
    <h2>Product 2</h2>
      <div class="price1">price1</div>
      <div class="price2">price2</div>
      <div class="price3">price3</div>
    </div>

    <div class="product product3">
    <h2>Product 3</h2>
      <div class="price1">price1</div>
      <div class="price2">price2</div>
      <div class="price3">price3</div>
    </div>
  </div>

</form>

Answer 1

更新：

我稍微重构了您的代码，使其更动态、更快速：

function priceStore() {

  // Get value of selected item
  const option = document.getElementById("Store").value;

  // Here you will store index (1, 2, 3) which category you should show
  let index;

  switch (true) {
    case ["Store1", "Store3"].includes(option):
      index = 1;
      break;
    case ["Store2", "Store4", "Store5"].includes(option):
      index = 2;
      break;
    case ["Store6"].includes(option):
      index = 3;
      break;
  }

  // If no condition is met just return
  if (!index) return;

  // Get all elements having 'price' in their class name
  const elements = document.querySelectorAll(".product [class^=price]");

  // Iterate through all of them
  elements.forEach(function(element) {

    // For example: if index is 2 and current element has price2 in its class name then Show it, if not hide it
    const shouldDisplay = element.classList.contains(`price${index}`);

    // Set display property
    element.style.display = shouldDisplay ? "block" : "none";

  });

}

函数 onchange select 仅更改 div 中的第一个元素

Function onchange select only changes first element in div

javascript

arrays

selectionchanged