Как сравнить несколько возможных значений регулярного выражения с заданной строкой

Question

Я новичок в javascript / jquery и могу не знать о многих функциях, которые могут помочь мне с моими проблемами, так как у меня очень элементарные знания javascript и jquery. И проект, над которым я работаю, просто для практики.

Итак, у меня есть строка, которую я хочу сравнить с определенными значениями, и возможны три различных значения, которые являются взаимно исчерпывающими.

$(".grid-item").click(function() {
    var classname = $(this).attr('class');
    console.log(classname);   //This returns "grid-item active car-right"

    var reg_class = /active checked booked/;

    var what_class = classname.match(reg_class);

    $(this).toggle_function(){

        if(what_class == active){

        }

        if(what_class == checked){

        }

        if(what_class == booked){

        }

    }
});

Но это не сработает, поскольку функция сравнения сравнивает значение переменной reg_class как строку, и в переменной classname ничего подобного нет.

Я посмотрел на этот ответ: " Сравните одну строку с несколькими значениями в одном выражении ". Но я не смог решить мою проблему там.

Итак, как мне создать переменную регулярного выражения с тремя различными возможными значениями, а затем сравнить ее со значением, которое имеется в переменной classname.

Нет ли способа сравнить это так: (если classname ==% active%) ........ Это может показаться смешным, но я не знаю, можно ли это сделать в javascript или нет.

Answer 1

Я думаю, что лучшим решением в вашем случае было бы использовать jQuery's .hasClass(), который посвящен этому:

$(function() {
  $('.grid-item').on('click', function (e) {
    if ($(this).hasClass('active')) {
      console.log('active');
    }
    if ($(this).hasClass('checked')) {
      console.log('checked');
    }
    if ($(this).hasClass('booked')) {
      console.log('booked');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-item checked booked somethingelse">click me</div>

Answer 2

Ваше регулярное выражение неверно, это должно сработать, если вы измените его в соответствии со своими потребностями:

  var classname = 'grid-item active car-right';

  var reg_class = /(active|checked|booked)/;

  var what_class = classname.match(reg_class);

  if (what_class !== null && what_class.length) {
    if (what_class[1] === "active"){

    }

    if (what_class[1] === "checked"){

    }

    if (what_class[1] === "booked"){

    }
  }

Пожалуйста, посмотрите больше на Регулярные выражения в JS

ТАКЖЕ ... вместо многих, многих if вы можете использовать оператор переключения , который будет более читабельным в конце.В вашем сценарии вы можете использовать его так:

switch (what_class[1])
{
    case 'active':
    {
        // some code
        break;
    }
    case 'checked':
    {
        // some code
        break;
    }
    case 'booked':
    {
        // some code
        break;
    }
}

Answer 3

Попробуйте разделить слова на |

var reg_class = /active|checked|booked/;

DEMO:

var classname = 'some_class active other_class';
var reg_class = /active|checked|booked/;
var what_class = classname.match(reg_class)[0];
console.log(what_class);

classname = 'some_class booked other_class';
what_class = classname.match(reg_class)[0];
console.log(what_class);

classname = 'some_class checked other_class';
what_class = classname.match(reg_class)[0];
console.log(what_class)

Answer 4

$(".grid-item").click(function() {
    var classname = $(this).attr('class');
    var reg_class = /active|checked|booked/;
    var what_class = classname.match(reg_class)[0];
    console.log(what_class);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="grid-item active car-right">button 1</button>
<button class="grid-item checked car-right">button 2</button>
<button class="grid-item booked car-right">button 3</button>

Answer 5

Чередуйте 3 различных параметра класса в шаблоне, затем извлеките полное совпадение строк из шаблона, если есть такое совпадение:

var match = classname.match(/active|checked|booked/);
var what_class = match ? match[0] : null;

Тогда вы можете проверить, what_class === 'active' или все, что вы хотите.