Question

这个代码只有在用于切换函数的类时才能正常工作，但是当我为其他函数添加类时，它无法切换。我发现除了＆＃34;切换类＆＃34;（如＆＃34; button-10ac＆＃34;）之外还有空格，它失败了。我不知道出了什么问题。请帮忙！

这是我的HTML代码

<div class="button-01a in">button1</div>
<div class="button-05i out">button2</div>
<div class="button-10ac ">button3</div>

<div class="button-01a info-01a in" style="display:none;">info1</div>
<div class="button-05i info-05i in" style="display:none;">info2</div>
<div class="button-10ac info-10ac out" style="display:none;">info3</div>

和JavaScript / jQuery代码

$("[class^=button-]").click(function(){
    if($('.info-'+ this.className.match(/(\w+)+$/)[0]).is(':visible')){
       $('.info-'+ this.className.match(/(\w+)+$/)[0]).hide()
    }
    else{
        $("[class*='info-']").hide();
        $('.info-'+ this.className.match(/(\w+)+$/)[0]).show()
    }
})

JSFiddle：Link

Answer 1

我想你试图使用前三个div来切换其他div，所以一次只显示一个div。我没有使用复杂的部分类匹配，而是使用单个类来标识按钮，使用另一个类来标识目标，然后使用另外一个类来区分目标，可能使用data-*属性按钮指示应切换的那个：

＆＃13;

$(".button").on("click", function() {
  var cls = "." + $(this).attr("data-toggle");
  $(".info:not(" + cls + ")").hide();
  $(".info" + cls).show();
});

＆＃13;

<div class="button in" data-toggle="x01a">button1</div>
<div class="button out" data-toggle="x05i">button2</div>
<div class="button" data-toggle="x10ac">button3</div>

<div class="info x01a in" style="display:none;">info1</div>
<div class="info x05i in" style="display:none;">info2</div>
<div class="info x10ac out" style="display:none;">info3</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

请注意，我在x之前添加了01a等等，以便我可以使用类选择器。（类选择器中的类名不能以未转义的数字开头;我们可以转义数字，但只是添加x更简单。）

但如果您仍然坚持使用现有的课程：

＆＃13;

// WARNING: Fragile! If you change the markup so that the button-xyz
// class isn't the *first* in the attribute, this
// fails!
$("div[class^=button]")
  // Filter out the targets
  .filter(function() {
    return !/(?:^| )info-[^ ]+(?:$| )/.test(this.className);
  })
  .on("click", function() {
    var cls = "info-" + this.className.match(/(?:^| )button-([^ ]+)(?:$| )/)[1];
    if (cls) {
      $("div[class^=button][class*=info]:not([class*=" + cls + "]").hide();
      $("div[class^=button][class*=" + cls + "]").show();
    }
  });

＆＃13;

<div class="button-01a in">button1</div>
<div class="button-05i out">button2</div>
<div class="button-10ac ">button3</div>

<div class="button-01a info-01a in" style="display:none;">info1</div>
<div class="button-05i info-05i in" style="display:none;">info2</div>
<div class="button-10ac info-10ac out" style="display:none;">info3</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

......但我不会这样做。： - ）

Answer 2

第一个问题是，正则表达式匹配单词字符序列，它必须在行的末尾结束，在这种情况下也是字符串的结尾。通过观察正则表达式$的最后一个字符可以知道这一点。

有关正则表达式中$的更多信息，请参阅：https://stackoverflow.com/a/13912609/4132642。

工作代码：

$("[class^=button-]").click(function(){
  let classNameRegex = /button-(\w*)/;
  let classNamePart = this.className.match(classNameRegex)[1];
  if($('.info-'+ classNamePart).is(':visible')){
    $('.info-'+ classNamePart).hide()
  }
  else{
    $("[class*='info-']").hide();
    $('.info-'+ classNamePart).show()
  }
})

JavaScript多类失败

2 个答案: