使用jQuery选择器在同一页中操作元素-PHP中文网问答

我尝试使用JQuery添加了两个选择器，但是内容没有显示出来，如果只添加一个选择器，那么它可以正常工作，所以请你帮我解决这个问题，以下是代码

这个脚本的想法是显示燃油价格（燃料和柴油），有3种类型的燃料和1种柴油第一个选择器按数字显示价格，第二个选择器按月份显示价格图表。

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

      
  3.22 AED -0.62-16.15%
 3.30 AED -0.62-15.82%
 3.41 AED -0.62-15.38%
 12.24 AED -2.36-16.15%
 12.54 AED -2.36-15.82%
 12.96 AED -2.36-15.38%
 3.87 AED -0.27-6.52%
 14.71 AED -1.03-6.52%
 
 
      
  [visualizer id="36" lazy="no" class=""]
 [visualizer id="39" lazy="no" class=""]
 [visualizer id="43" lazy="no" class=""]
 [visualizer id="48" lazy="no" class=""]

你可以在我的网站oileprice.ae上检查它

我使用的是WordPress平台

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