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 ist der Code. Die Idee dieses Skripts ist die Anzeige der Kraftstoffpreis (Kraftstoff und Diesel), es gibt 3 Kraftstoffarten und 1 Dieseltyp. Der erste Selektor zeigt den Preis nach Zahlen und der zweite Selektor zeigt die Preistabelle nach Monat. jQuery(function($){varselects=$('select');varvalues='';selects.ea

Bearbeiten Sie Elemente auf derselben Seite mithilfe von jQuery-Selektoren-Fragen und Antworten zum chinesischen PHP-Netzwerk

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

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; }