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){

        }

    }
});

但这不起作用，因为match函数将reg_class变量的值整体作为一个字符串进行比较，并且classname变量中没有类似的内容。

我看着这个答案，“ Compare one String with multiple values in one expression”。但是我不能在那里解决我的问题。

因此，如何创建具有三个不同可能值的regex变量，然后将其与变量类名中的值进行比较。

没有任何方法可以像这样进行比较：（如果classname ==％active％）.......这看起来很荒谬，但是我不知道是否可以使用javascript完成。

Answer 1

我认为在您的情况下，更好的解决方案是使用专用于此的jQuery的.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

在模式中的3个不同的类选项之间进行替换，如果存在这样的匹配项，则从模式中提取完整的字符串匹配项：

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

然后，您可以检查what_class === 'active'还是您想要的任何内容。

Answer 3

尝试使用|

分隔单词

var reg_class = /active|checked|booked/;

演示：

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

您的常规技能是错误的，如果您根据需要对其进行了修改，这应该可以工作

  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"){

    }
  }

请在Regular Expressions in JS上查看更多信息

ALSO ...您可以使用switch operator代替很多if，这将使结尾处的内容更具可读性。在您的方案中，您可以像这样使用它：

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

如何比较多个可能的正则表达式值与给定的字符串

5 个答案: