Question

是否有任何方法可以缩短以下 jQuery 代码部分？

我可能需要为其他8个选择框重复使用相同的逻辑。非常感谢。

代码

＆＃13;

$('#select_client').on('change', function() {
  var val = this.value;

  /* Possible to shorten this section? I have more cases like this */
  if (val == 'OTHER') {
    $('#input_client').addClass('show');
    $('#input_client').removeClass('hide');
    $('#input_client').val('');
    $('#input_client').focus();
  } else {
    $('#input_client').addClass('hide');
    $('#input_client').removeClass('show');
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="form-control" id="select_client" name="select_client">
    	<option value="1">Company A</option>
    	<option value="2">Company A</option>
    	<option value="3">Company A</option>
    	<option value="4">Company A</option>
    	<option value="OTHER">Other</option>
    </select>
<input id="input_client" type="text" class="form-control hide" placeholder="Please provide Client name" />

＆＃13;

Answer 1

请试试这个

$('#select_client').on('change', function() {
        var val = this.value;

        /* Possible to shorten this section? I have more cases like this */
        if(val=='OTHER'){
            $('#input_client').addClass('show').removeClass('hide').val('').focus();

        } else {
            $('#input_client').addClass('hide').removeClass('show');

        }
    })

Answer 2

$('#select_client').on('change', function() {
    $input = $('#input_client')
      .toggleClass('show',$(this).val() ==='OTHER')
      .removeClass('hide',$(this).val() !=='OTHER');

    if($(this).val()==='OTHER'){
        $input.val('').focus();
    }
});

这个更短......你可以添加一些条件，使它与多个select-input耦合使用相同的功能;）

Answer 3

由于您使用的是jQuery，因此可以链接函数以减少键入选择器的冗余。

如果您希望根据条件添加/删除课程，也可以查看.toggleClass。

此外，您可以将其保存在变量中并在任何地方使用此变量，而不是一次又一次地获取元素。

＆＃13;

$('#select_client').on('change', function() {
  var valid = this.value === 'OTHER';
  var $input = $('#input_client');

  $input
    .toggleClass('show', valid)
    .toggleClass('hide', !valid);
  if (valid) {
    $input
      .val('')
      .focus();
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="form-control" id="select_client" name="select_client">
    <option value="1">Company A</option>
    <option value="2">Company A</option>
    <option value="3">Company A</option>
    <option value="4">Company A</option>
    <option value="OTHER">Other</option>
</select>
<input id="input_client" type="text" class="form-control hide" placeholder="Please provide Client name" />

＆＃13;

Answer 4

您可以使用.toggle根据条件切换输入的显示。

此外，如果您计划有多个选择框和输入框，则应使用类而不是id。

如果您的网页中包含相同的多个元素，则定位ID不是一个好主意。

在下面的示例中，我使用.input_client类作为选择器。

＆＃13;

$('#select_client').on('change', function() {
  var val = this.value;

  /* Possible to shorten this section? I have more cases like this */
  if (val == 'OTHER') {
    $(this).next(".input_client").toggle("display");
    $(this).next(".input_client").val('');
    $(this).next(".input_client").focus();
  }
})

＆＃13;

.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="form-control" id="select_client" name="select_client">
    <option value="1">Company A</option>
    <option value="2">Company A</option>
    <option value="3">Company A</option>
    <option value="4">Company A</option>
    <option value="OTHER">Other</option>
</select>
<input id="input_client" type="text" class="input_client form-control hide" placeholder="Please provide Client name" />

＆＃13;

缩短或简化jQuery逻辑

4 个答案: