Create a random class and read with regex in jQuery
So, I am doing this little game. There are 7 radio buttons that trigger other buttons when the toggleClass 'on' is clicked, which is defined in jQuery.
The goal is to get all buttons to be 'on'.
The problem is that you can easily right click, select Inspect Element
, add the 'on' class and win the game.
So I need to make the classes for these radio buttons random. For example. 'on-214124712', 'on-307153821369' or 'on-6471649031264'. But they must use the same prefix, which is "on".
How can I generate them differently with each click? And how can I still switch the class and check the hasClass using regex?
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!');
}
});
Thank!
source to share
UPDATE
You can use this selector, which checks if the element has a class that contains the string you want (check the updated demo):
$('.switch[class*=on-]').addClass('red');
Every div that has a containing class on
will be red
$('.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>
source to share