WordPress站点双jQuery选择器功能失效，请求技术修复（附代码）

问题根源 #

两组选择器逻辑都使用$('select')选中页面所有下拉框，导致：

• 生成的匹配类名混合了两组下拉框的值，无法正确定位目标元素
• 下拉框的change事件被重复绑定，触发时两组逻辑互相干扰

修复后的完整代码 #

JavaScript

jQuery(function($) {
  // 第一组：价格数值选择器（仅处理#select_container内的下拉框）
  var priceSelects = $('#select_container select');
  // 初始化显示默认匹配的价格
  var priceValues = '';
  priceSelects.each(function() {
    priceValues += '.' + $(this).val();
  });
  $(priceValues).show();

  priceSelects.on('change', function() {
    // Diesel选项禁用第二下拉框的逻辑
    if ($('#SelectOne').val() === 'Diesel') {
      $('#SelectTwo').prop('disabled', true);
    } else {
      $('#SelectTwo').prop('disabled', false);
    }
    // 隐藏所有价格容器，显示匹配的项
    $('#results_container > div').hide();
    var newPriceValues = '';
    priceSelects.each(function() {
      newPriceValues += '.' + $(this).val();
    });
    $(newPriceValues).show();
  });
});

jQuery(function($) {
  // 第二组：图表选择器（仅处理#select_chart内的下拉框）
  var chartSelects = $('#select_chart select');
  // 初始化显示默认匹配的图表
  var chartValues = '';
  chartSelects.each(function() {
    chartValues += '.' + $(this).val();
  });
  $(chartValues).show();

  chartSelects.on('change', function() {
    // 隐藏所有图表容器，显示匹配的项
    $('#results_chart > div').hide();
    var newChartValues = '';
    chartSelects.each(function() {
      newChartValues += '.' + $(this).val();
    });
    $(newChartValues).show();
  });
});

CSS

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

HTML

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

关键改动说明 #

1. 分组限定选择器：将第一组选择器限定为#select_container select，第二组限定为#select_chart select，彻底隔离两组逻辑
2. 独立维护状态：每组逻辑单独处理自己的下拉框值和结果容器，避免值混合
3. 保留原有功能：完整保留了Diesel选项禁用第二下拉框的交互逻辑，仅作用于第一组下拉框

内容的提问来源于stack exchange，提问作者Rawaf