Как написать оператор switch в jQuery / Javascript, чтобы проверить, имеет ли элемент определенный класс? - PullRequest
Новая
       36

Как написать оператор switch в jQuery / Javascript, чтобы проверить, имеет ли элемент определенный класс?

11 голосов
/ 15 сентября 2011

Это структура оператора if-else, который я использую: 

$('.myclass a').click(function() {
   if ($(this).hasClass('class1')) {
        //do something
   } else if ($(this).hasClass('class2')) {
        //do something
   } else if ($(this).hasClass('class3')) {
        //do something
   } else if ($(this).hasClass('class4')) {
        //do something
   } else {
        //do something
   }
});

Уже есть довольно много случаев, и я подумал, что использование оператора switch было бы лучше.Как мне сделать это в jQuery / javascript?

Ответы [ 7 ]

19 голосов
/ 15 сентября 2011

Проблема в том, что пользователь может иметь более одного класса. В противном случае вы можете сделать: 

$('.myclass a').click(function() {
   var className = $(this).attr('class');
   switch(className){
      case 'class1':
     //put your cases here
   }
});
19 голосов
/ 15 сентября 2011

Попробуй это. Не намного чище, но все же заявление о смене. 

$('.myclass a').click(function() {
    switch (true) {
      case $(this).hasClass('class1'):
        // do stuff
        break;
      case $(this).hasClass('class2'):
        // do stuff
        break;
      case $(this).hasClass('class3'):
        // do stuff
        break;
    }
}
5 голосов
/ 15 сентября 2011

Я думаю, что самый чистый путь может быть таким: 

$('.myclass a.class1').click(function() {
   // code to process class1
});

$('.myclass a.class2').click(function() {
   // code to process class2
});

$('.myclass a.class3').click(function() {
   // code to process class3
});

$('.myclass a.class4').click(function() {
   // code to process class4
});

Если бы у вас их было миллион, вы могли бы даже поместить их в структуру данных, такую ​​как: 

// to define them all
var classHandlers = {
    class1: function() {
        // class1 code here
    },
    class2: function() {
        // class2 code here
    },
    class3: function() {
        // class3 code here
    },
    class4: function() {
        // class4 code here
    }
};

// to register them all
$.each(classHandlers, function(key, fn) {
    $('.myclass a.' + key).click(fn);
});

Поскольку вы спросили (в комментарии), как бы вы делали обработчик событий для объектов без имени класса, вот как вы могли бы это сделать, если искали имя класса: 

$(".myclass a").not("[class]").click(function() {
    // code to handle objects with no class name here
});

Я проверил это здесь: http://jsfiddle.net/jfriend00/TAjKR/

0 голосов
/ 10 января 2017 

    $("#isTest").click(function () {

	  if($('div').is('.redColor')){
	  	$('div').addClass('blueColor');
	  }

    });

    $("#hasClassTest").click(function () {

	  if($('div').hasClass('.redColor')){
	  	$('div').addClass('blueColor');
	  }

    });

	$("#reset").click(function () {
	  location.reload();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style type="text/css">
  .redColor {
  	background:red;
  }
  .blueColor {
  	background:blue;
  }
 </style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery check if an element has a certain class</h1>

  <div class="redColor">This is a div tag with class name of "redColor"</div>

  <p>
  <button id="isTest">is('.redColor')</button>
  <button id="hasClassTest">hasClass('.redColor')</button>
  <button id="reset">reset</button>
  </p>

</body>
</html>
0 голосов
/ 25 августа 2016

Я знаю, что уже поздно, и у вашего пользователя есть только один класс, но, если было более одного класса: 

//<div class="foo bar"></div>
//<div class="other bar"></div>

switch(true) {
  case 'foo':
    true;
    break;
  case 'other':
    true;
}
0 голосов
/ 07 апреля 2016

Чтобы проверить hasClass в операторе switch: 

var elementClass;
var classCheck = $('#myElement').hasClass(elementClass)

switch(classCheck){
  case elementClass === 'foo':
     console.log('whatever');
     break;
}
0 голосов
/ 15 сентября 2011

Я не думаю, что здесь поможет один оператор switch, потому что один элемент может иметь несколько классов, и вы не можете использовать elem.className для переключения. Один из вариантов - структурировать код более читабельным способом, используя оператор for, в котором есть переключатели ...: 

$('.myclass a').click(function() 
{
    var classes = ["class1", "class2", "class3","class4"];
    var self = $(this);
    for(var i =0, ii = classes.length;i<ii;i++)
    {
        var className = classes[i];
        if(self.hasClass(className))
        {
            switch(className)
            {
                case 'class1':
                    //code here... 
                break;
                case 'class2':
                    //code here... 
                break;      
                case 'class3':
                    //code here... 
                break;     
                case 'class4':
                    //code here... 
                break;
            }

        }
    }       
});
...