Bearbeiten Sie Elemente auf derselben Seite mithilfe von jQuery-Selektoren

Question

Ich habe versucht, mit JQuery zwei Selektoren hinzuzufügen, aber der Inhalt wird nicht angezeigt. Wenn ich nur einen Selektor hinzufüge, funktioniert es einwandfrei. Bitte helfen Sie mir, dieses Problem zu lösen. Unten finden Sie den Code

Die Idee dieses Skripts besteht darin, die Kraftstoffpreise (Kraftstoff und Diesel) anzuzeigen. Es gibt 3 Kraftstoffarten und 1 Dieselart Der erste Selektor zeigt die Preise nach Zahlen und der zweite Selektor zeigt die Preistabelle nach Monaten.

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>

Sie können es auf meiner Website oileprice.ae überprüfen

Ich verwende die WordPress-Plattform

Answer 1

问题是你的选择器不够“具体”。

所以你只需要在$("select")中添加相关的id，比如$('#select_container select');

演示

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>