javascript - 生成一个随机类并在 jQuery 中使用正则表达式读取

Question

所以我制作了这种小游戏。有 7 个开关可以在点击 toggleClass 'on' 时触发其他按钮，这是在 jQuery 中定义的。

目标是让所有按钮都处于“打开”状态。

问题是，您可以轻松地单击鼠标右键，选择 Inspect Element，添加“on”类并赢得游戏。

所以我需要让这些开关的类随机化。例如。 'on-214124712'、'on-307153821369' 或 'on-6471649031264'。但它们必须共享相同的前缀“on-”。

如何在每次点击时以不同方式生成它们？我如何仍然使用正则表达式切换类并检查它们的 hasClass？

HTML:

<h2>You clicked <span id="output">0</span> times</h2>
<div class="switches">
     <div id="switch1" class="switch"></div>
     <div id="switch2" class="switch on"></div>
     <div id="switch3" class="switch on"></div>
     <div id="switch4" class="switch"></div>
     <div id="switch5" class="switch on"></div>
     <div id="switch6" class="switch on"></div>
     <div id="switch7" class="switch"></div>
</div>

Javascript:

var count = 0;

$('.switch').click(function () {
    $('#output').html(function (i, val) {
        return val * 1 + 1
    });
});

$("#switch1").bind("click", function () {
    $(this).toggleClass("on");
    $('#switch3').toggleClass("on");
    $('#switch5').toggleClass("on");
    $('#switch6').toggleClass("on"); 
    count++;

});
$("#switch2").bind("click", function () {
    $(this).toggleClass("on");
    $('#switch1').toggleClass("on");
    $('#switch3').toggleClass("on");
    $('#switch7').toggleClass("on");
    count++;

});
$("#switch3").bind("click", function () {
    $(this).toggleClass("on");
    $('#switch2').toggleClass("on");
    $('#switch5').toggleClass("on");
    count++;

});
$("#switch4").bind("click", function () {
    $(this).toggleClass("on");
    //$('#switch1').toggleClass("on");
    $('#switch2').toggleClass("on");
    $('#switch5').toggleClass("on");
    count++;

});
$("#switch5").bind("click", function () {
    $(this).toggleClass("on");
    $('#switch1').toggleClass("on");
    $('#switch4').toggleClass("on");
    count++;

});
$("#switch6").bind("click", function () {
    $(this).toggleClass("on");
    $('#switch3').toggleClass("on");
    $('#switch5').toggleClass("on");
    $('#switch7').toggleClass("on");
    count++;

});
$("#switch7").bind("click", function () {
    $(this).toggleClass("on");
    $('#switch3').toggleClass("on");
    $('#switch4').toggleClass("on");
    count++;

});

$('.switches').click(function () {
    if ($("#switch1").hasClass("on") && $("#switch2").hasClass("on") &&   $("#switch3").hasClass("on") && $("#switch4").hasClass("on") && $("#switch5").hasClass("on") && $("#switch6").hasClass("on") && $("#switch7").hasClass("on")) {
        alert('Success!');
    }
});

谢谢!

Answer 1

更新

您可以使用此选择器来检查元素是否具有包含所需字符串的类(检查更新的演示):

$('.switch[class*=on-]').addClass('red');

---

每个具有包含 on 的类的 div 都会变红

$('.switch[class*=on-]').addClass('red');

.red { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="switches">
  <div id="switch1" class="switch">test</div>
  <div id="switch2" class="switch on-9876597856978">test</div>
  <div id="switch3" class="switch on-jhg675">test</div>
  <div id="switch4" class="switch">test</div>
  <div id="switch5" class="switch on-876uyg">test</div>
  <div id="switch6" class="switch on-kjhg76gt9">test</div>
  <div id="switch7" class="switch">test</div>
</div>