生成一個隨機類，並在jQuery中用正則表達式讀取

Question

所以我做了這種小遊戲。有7個開關在click上觸發其他按鈕，在jQuery中定義的toggleClass'on'上。

目標是讓所有按鈕進入'開'狀態。

問題是，你可以很容易地右鍵單擊，選擇Inspect Element，添加類'on'並贏得比賽。

所以我需要使這些開關的類隨機。例如。 'on-214124712'，'on-307153821369'或'on-6471649031264'。但他們必須共享相同的前綴「on-」。

如何隨每次點擊產生不同的結果？我怎麼還可以toggleClass和檢查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

UPDATE

如果元素包含所需的字符串（檢查更新的演示）一類你可以使用這個選擇，檢查：

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

---

每格有一個包含on的類將變爲紅色

$('.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>