代码之家 › 专栏 › 技术社区 › Craig Walters

如何检查jquery IF语句中的多个值

jquery javascript

Craig Walters · 技术社区 · 2 年前

我有下面的代码,它根据下拉列表中的选项显示/隐藏div,但它仅在用户选择1时切换。在我的下拉列表中有几个项目我想显示DIV。例如,假设我的下拉列表中有值1到8,并且当用户选择了4、6和7时,我想显示一个DIV。如果用户将选择从4更改为6,我不希望DIV关闭并隐藏。

    $(document).ready(function(){
    $('#TypeofAction').on('change', function() {
      if ( this.value == '1') 
      //.....................^.......
      {
        $("#business").show();
      }
      else
      {
        $("#business").hide();
      }
    });
        
});

2 回复 | 直到 2 年前

MW_dev 2 年前

使用数组存储“On”值,并使用jquery的 toggle :

$(document).ready(function() {
  $('#TypeofAction').on('change', function() {
    let onVals = ["4", "6", "7"];
    $("#business").toggle(onVals.includes(this.value));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="TypeofAction">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<div id="business">It's busness time!</div>

Ron 2 年前

您可以使用 switch() 或者你可以用完全不同的方式写if/else。。但这里是:

switch (this.value) {
  case '1':
  case '4':
  case '6':
  case '7':
    $("#business").show();
    break;
  case '2':
    $("#business").hide();
    break;
  case '3':
    console.log('do something else..');
    break;
  default:
    console.log('Invalid selection..');
}

您还可以使用多个if条件:

if ( this.value == 1 || this.value == 4 || this.value == 6 || this.value == 7 ) {
...
}elseif( this.value == 2 || this.value == 3 ){
...
}else{
...
}

或者可以在数组中添加有效值,并使用 indexOf()

if ([1,4,6,7].indexOf(this.value) > -1){
...
}

或更换 indexOf() 具有 includes() :

if ([1,4,6,7].includes(this.value)){
...
}

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前