Question

点击正文中的任何元素时，我正在运行Javascript Switch语句。因此，当找到匹配项时（在这种情况下，我的目标是按钮类并返回false）， break关键字应该停止执行并忽略所有其余代码。相反，当我点击按钮时，默认代码块仍会运行。它会触发我在默认代码块中设置的控制台消息，但不应该。

为什么返回false或break关键字无效？

如果已经匹配，如何停止默认代码块？

（打开控制台查看消息）以下是Jsfiddle

的示例

Javascript

 $(document).on('click', function(event) {

  var e = $( this );
  var eClass = e.attr( 'class' );

  switch( eClass ){

      case 'btn-default':

             return false;

             break;

      default:

          var identifier = $( '.identifier' );

          if (!$(event.target).find( $( identifier ) ).length ) {

                console.log( 'Identical' );

          }            
       }


 });

HTML

 <div class="row">
    <div class="col visible" data-id="el_1">
        Visible Content
    </div>
    <div class="col">
        <button type="button" class="btn btn-default">
           Click
        </button>
    </div>
  </div>

  <div class="identifier" id="el_1"></div>

Answer 1

您的按钮的类是“btn btn-default”，但您的开关案例仅查找“btn-default”，但不匹配。

Answer 2

简单地说：“btn btn-default”与“btn-default”不匹配。您需要拆分/检查类，或者在元素上使用类似jQuery的.hasClass()。

您应该使用if语句（eClass.split(/ +/).includes('btn-default')将按空格分割所有类，.includes将搜索与btn-default匹配的任何类：

$(document).on('click', function(event) {
  var e = $( event.target );
  var eClass = e.attr( 'class' ) || ''; //Default to empty string if the class doesn't have an attribute of class.
  
  if ( eClass.split(/ +/).includes('btn-default') ) {
    return false;
  }

  var identifier = $( '.identifier' );

  if (!$(event.target).find( $( identifier ) ).length ) {
    console.log( 'Identical' );
  }   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col visible" data-id="el_1">
        Visible Content
    </div>
    <div class="col">
        <button type="button" class="btn btn-default">
           Click
        </button>
    </div>
  </div>

  <div class="identifier" id="el_1"></div>

另外：jQuery也可以使用.hasClass()，以确定元素是否存在类。

Answer 3

您可以使用hasClass来检查该元素是否包含类btn-default。您还可以删除switch语句以使代码更易于阅读。

if($(this).hasClass('btn-default')) {
    return false;
}
else {
    var identifier = $( '.identifier' );
    if (!$(event.target).find( $( identifier ) ).length ) {
        console.log( 'Identical' );

    }   
}

为什么返回false不能在switch语句中工作？

3 个答案: