Question

当我从下拉菜单中选择一个选项时，我正尝试将一个类添加到<li>。这是我简化的html：

<li id="customize-control-navbar_position" class="customize-control customize-control-select">      
<label>
<span class="customize-control-title">NavBar Positioning</span>

<select data-customize-setting-link="navbar_position">
    <option value="none">None</option>
    <option value="top">Top</option>
    <option value="under-header">After Header Section</option>
    <option value="hidden" selected='selected'>Hidden</option>          
</select>
</label>
</li>

<li id="customize-control-navbar_height" class="customize-control customize-control-slider">
<label>
<span class="customize-control-title">NavBar Height</span>

    <input type="text" class="kirki-slider" id="input_navbar_height" disabled value="130" data-customize-setting-link="navbar_height"/>

</label>
</li>

这是我的JS

jQuery(document).ready(function($){

    var navbar_pos_val = $('#customize-control-navbar_position select').val();
    $("#customize-control-navbar_position").change(function() {
    if (navbar_pos_val == 'hidden') {
        $('#customize-control-navbar_height').addClass('disabled');
    }
    });

});

我试图添加课程＆＃34;禁用＆＃34;隐藏＆＃34;隐藏＆＃34;到<li> #customize-control-navbar_height被选中。目前，此代码存在一些奇怪的行为，有时它在选择任何选项时有效，有时则根本不起作用。我想知道是否有人可以看到我的代码有任何明显的问题？

Answer 1

这应该解决它：

jQuery(document).ready(function($){
    $("#customize-control-navbar_position").change(function() {
      var navbar_pos_val = $('#customize-control-navbar_position select').val();
      if (navbar_pos_val == 'hidden') {
        $('#customize-control-navbar_height').addClass('disabled');
      }
    });
});

Answer 2

问题是，每当所选时间发生变化时，您都不会更新navbar_pos_val的值。试试这个

jQuery(document).ready(function($)
{

    $("#customize-control-navbar_position").change(function() 
    {
         var navbar_pos_val = $('#customize-control-navbar_position select').val();
        if (navbar_pos_val == 'hidden')
        {
          $('#customize-control-navbar_height').addClass('disabled');
         }
    });

});

根据select选项将class添加到item

2 个答案: