Memanipulasi elemen dalam halaman yang sama menggunakan pemilih jQuery

Question

Saya cuba menambah dua pemilih menggunakan JQuery, tetapi kandungannya tidak dipaparkan, jika saya menambah hanya satu pemilih, maka ia berfungsi dengan baik, jadi tolong bantu saya menyelesaikan masalah ini, di bawah adalah kodnya

Idea skrip ini adalah untuk menunjukkan harga bahan api (bahan api dan diesel), terdapat 3 jenis bahan api dan 1 jenis diesel Pemilih pertama menunjukkan harga mengikut nombor dan pemilih kedua menunjukkan carta harga mengikut bulan.

jQuery(function($) {
  var selects = $('select');
  var values = '';
  selects.each(function() {
    values += '.' + $(this).val();
  });
  $(values).show();
  $('select').on('change', function(index, value) {
    if ($('#SelectOne').val() == 'Diesel') {
      $('#SelectTwo').prop('disabled', true);
    } else {
      $('#SelectTwo').prop('disabled', false);
    }
    $('#results_container > div').hide();
    var values = '';
    selects.each(function() {
      values += '.' + $(this).val();
    });
    $(values).show();
  });
});

jQuery(function($) {
  var selects = $('select');
  var values = '';
  selects.each(function() {
    values += '.' + $(this).val();
  });
  $(values).show();
  $('select').on('change', function(index, value) {

    $('#results_chart > div').hide();
    var values = '';
    selects.each(function() {
      values += '.' + $(this).val();
    });
    $(values).show();
  });
});

#results_container>div,
#results_chart>div {
  display: none;
}

.result {
  padding-top: 10px;
}

.dif,
.difp {
  display: inline;
  padding-left: 15px;
  color: red;
}

.arrow {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  border: solid Red;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <div id="select_container">
    <select id="SelectOne">
      <option value="Fuel">Fuel</option>
      <option value="Diesel">Diesel</option>
    </select>

    <select id="SelectTwo">
      <option value="E-Plus-91">E-Plus 91</option>
      <option value="Special-95">Special 95</option>
      <option value="Super-98">Super 98</option>
    </select>

    <select id="SelectThree">
      <option value="Liter">Liter</option>
      <option value="Galon">Galon</option>
    </select>
  </div>

  <div id="results_container" class="result">
    <div class="Fuel E-Plus-91 Liter">3.22 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-16.15%</span></div>
    <div class="Fuel Special-95 Liter">3.30 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.82%</span></div>
    <div class="Fuel Super-98 Liter">3.41 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.38%</span></div>
    <div class="Fuel E-Plus-91 Galon">12.24 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-16.15%</span></div>
    <div class="Fuel Special-95 Galon">12.54 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.82%</span></div>
    <div class="Fuel Super-98 Galon">12.96 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.38%</span></div>
    <div class="Diesel Special-95 Super-98 E-Plus-91 Liter">3.87 AED <i class="arrow top"></i><span class="dif">-0.27</span><span class="difp">-6.52%</span></div>
    <div class="Diesel Special-95 Super-98 E-Plus-91 Galon">14.71 AED <i class="arrow top"></i><span class="dif">-1.03</span><span class="difp">-6.52%</span></div>
    <div></div>
  </div>
</center>

<center>
  <div id="select_chart">
    <select id="SelectOne1">
      <option value="cFuel">Fuel</option>
      <option value="cDiesel">Diesel</option>
    </select>

    <select id="SelectTwo1">
      <option value="cLiter">Liter</option>
      <option value="cGalon">Galon</option>
    </select>
  </div>

  <div id="results_chart" class="result">
    <div class="cFuel cLiter">[visualizer id="36" lazy="no" class=""]</div>
    <div class="cFuel cGalon">[visualizer id="39" lazy="no" class=""]</div>
    <div class="cDiesel cLiter">[visualizer id="43" lazy="no" class=""]</div>
    <div class="cDiesel cGalon">[visualizer id="48" lazy="no" class=""]</div>
    <div></div>
  </div>
</center>

Anda boleh menyemaknya di laman web saya oilprice.ae

Saya menggunakan platform WordPress

Answer 1

Masalahnya ialah pemilih anda tidak cukup "spesifik".

Jadi anda hanya perlu $("select")中添加相关的id，比如$('#select_container select');

Demo

jQuery(function($) {
  var selects = $('#select_container select');
  var values = '';
  selects.each(function() {
    values += '.' + $(this).val();
  });
  $(values).show();
  $('#select_container select').on('change', function(index, value) {
    if ($('#SelectOne').val() == 'Diesel') {
      $('#SelectTwo').prop('disabled', true);
    } else {
      $('#SelectTwo').prop('disabled', false);
    }
    $('#results_container > div').hide();
    var values = '';
    selects.each(function() {
      values += '.' + $(this).val();
    });
    $(values).show();
  });
});

jQuery(function($) {
  var selects = $('#select_chart select');
  var values = '';
  selects.each(function() {
    values += '.' + $(this).val();
  });
  $(values).show();
  $('#select_chart select').on('change', function(index, value) {

    $('#results_chart > div').hide();
    var values = '';
    selects.each(function() {
      values += '.' + $(this).val();
    });
    $(values).show();
  });
});

#results_container>div,
#results_chart>div {
  display: none;
}

.result {
  padding-top: 10px;
}

.dif,
.difp {
  display: inline;
  padding-left: 15px;
  color: red;
}

.arrow {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  border: solid Red;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <div id="select_container">
    <select id="SelectOne">
      <option value="Fuel">Fuel</option>
      <option value="Diesel">Diesel</option>
    </select>

    <select id="SelectTwo">
      <option value="E-Plus-91">E-Plus 91</option>
      <option value="Special-95">Special 95</option>
      <option value="Super-98">Super 98</option>
    </select>

    <select id="SelectThree">
      <option value="Liter">Liter</option>
      <option value="Galon">Galon</option>
    </select>
  </div>

  <div id="results_container" class="result">
    <div class="Fuel E-Plus-91 Liter">3.22 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-16.15%</span></div>
    <div class="Fuel Special-95 Liter">3.30 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.82%</span></div>
    <div class="Fuel Super-98 Liter">3.41 AED <i class="arrow top"></i><span class="dif">-0.62</span><span class="difp">-15.38%</span></div>
    <div class="Fuel E-Plus-91 Galon">12.24 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-16.15%</span></div>
    <div class="Fuel Special-95 Galon">12.54 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.82%</span></div>
    <div class="Fuel Super-98 Galon">12.96 AED <i class="arrow top"></i><span class="dif">-2.36</span><span class="difp">-15.38%</span></div>
    <div class="Diesel Special-95 Super-98 E-Plus-91 Liter">3.87 AED <i class="arrow top"></i><span class="dif">-0.27</span><span class="difp">-6.52%</span></div>
    <div class="Diesel Special-95 Super-98 E-Plus-91 Galon">14.71 AED <i class="arrow top"></i><span class="dif">-1.03</span><span class="difp">-6.52%</span></div>
    <div></div>
  </div>
</center>

<center>
  <div id="select_chart">
    <select id="SelectOne1">
      <option value="cFuel">Fuel</option>
      <option value="cDiesel">Diesel</option>
    </select>

    <select id="SelectTwo1">
      <option value="cLiter">Liter</option>
      <option value="cGalon">Galon</option>
    </select>
  </div>

  <div id="results_chart" class="result">
    <div class="cFuel cLiter">[visualizer id="36" lazy="no" class=""]</div>
    <div class="cFuel cGalon">[visualizer id="39" lazy="no" class=""]</div>
    <div class="cDiesel cLiter">[visualizer id="43" lazy="no" class=""]</div>
    <div class="cDiesel cGalon">[visualizer id="48" lazy="no" class=""]</div>
    <div></div>
  </div>
</center>