在运行 function 之前已单击检查元素
[英]Check element has been clicked before running function
问题描述
I have multiple elements that users select (by clicking on them) in an attention task.
我有多个元素，用户 select（通过单击它们）在注意力任务中。 Currently, I have code in which the elements turn red when clicked.目前，我有代码，其中元素在单击时变为红色。 When they are done, users will click "next" to see another task.完成后，用户将单击“下一步”以查看另一个任务。 Critically, before they move on, they must make a selection.至关重要的是，在他们继续前进之前，他们必须做出选择。
So I need to check that the user has selected one of the elements.所以我需要检查用户是否选择了其中一个元素。
If someone has not selected one of the elements before clicking "next", then I'll write an error message.如果有人在单击“下一步”之前没有选择其中一个元素，那么我会写一条错误消息。 But first I'm having trouble checking that an element has been clicked in the first place.但首先我无法检查一个元素是否已被点击。 Preferably, I'll also be checking which element was clicked.最好，我还将检查单击了哪个元素。
Thanks in advance for the help!在此先感谢您的帮助！
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px white;
text-align: center;
color: black;
cursor: pointer;
}
#buttonGallery {
margin: 10px;
padding: 10px;
border: solid 2px black;
width: 155px;
}
#button_1 {
background-color: #ffcc66;
}
#button_2 {
background-color: #99ffff;
}
.buttons:hover {
background-color: red !important;
border: solid 3px black !important;
}
.selected {
background-color: red !important;
border: solid 3px black !important;
}
#next {
background-color: gray;
margin: 10px;
width: 150px;
height: 50px;
border: solid 2px white;
text-align: center;
color: black;
cursor: pointer;
}
</style>
</head>
<body>
<div id="buttonGallery">
<div id="button_1" class="buttons">
<p>button_1</p>
</div>
<div id="button_2" class="buttons">
<p>button_2</p>
</div>
</div>
<div id="next">
<p>next</p>
</div>
<script type="text/javascript">
$('.buttons').click(function() {
$('.buttons').removeClass("selected");
$(this).toggleClass("selected");
});
$('#next').click(function() {
// check that one of the elements has been clicked
// if an element has not been clicked, then show error message
// console.log(which element was clicked)
$('#buttonGallery').hide();
$('#next').hide();
});
</script>
</body>
</html>
2 个解决方案
解决方案1
0 已采纳 2020-05-03 08:04:24
If at least one of the elements has been clicked, then that buttons class element will have class selected .如果至少单击了一个元素，则该buttons class 元素将selected class 。 So, we can use that logic like:所以，我们可以使用这样的逻辑：
No element was selected, if
buttonsdo not have anyselectedclass like:未选择任何元素，如果buttons没有任何selected的 class，例如：$('.buttons.selected').length === 0One element was selected, if
buttonshave aselectedclass like:如果buttons具有selected的 class ，则选择了一个元素，例如：$('.buttons.selected').length > 0 // Or, simply the else part in the demo.To get the
idof thebuttonsclicked we can simply use:要获取点击buttons的id，我们可以简单地使用：var id = $('.buttons.selected').attr('id');
$('.buttons').click(function() { $('.buttons').removeClass("selected"); $(this).toggleClass("selected"); }); $('#next').click(function() { // check that one of the elements has been clicked // if an element has not been clicked, then show error message if ($('.buttons.selected').length === 0) { console.log('Please select one element first.') } else { // which element was clicked var id = $('.buttons.selected').attr('id'); console.log(id + ' was clicked'); $('#buttonGallery').hide(); $('#next').hide(); } });
.buttons{width:150px;height:50px;border:solid 2px #fff;text-align:center;color:#000;cursor:pointer} #buttonGallery{margin:10px;padding:10px;border:solid 2px #000;width:155px} #button_1{background-color:#fc6} #button_2{background-color:#9ff}.buttons:hover{background-color:red;important:border.solid 3px #000:important};selected{background-color:red:important;border:solid 3px #000;important} #next{background-color:gray;margin:10px;width:150px;height:50px;border:solid 2px #fff;text-align:center;color:#000;cursor:pointer}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="buttonGallery"> <div id="button_1" class="buttons"> <p>button_1</p> </div> <div id="button_2" class="buttons"> <p>button_2</p> </div> </div> <div id="next"> <p>next</p> </div>
解决方案2
0 2020-05-03 08:06:37
You need to check if the button has selected class after clicking on next button and then show error messages if there is no selected class.单击下一步按钮后，您需要检查按钮是否selected了 class，如果没有选择 class，则显示错误消息。
$('#error').hide(); $('.buttons').click(function() { $('#error').hide(); $('.buttons').removeClass("selected"); $(this).toggleClass("selected"); }); $('#next').click(function() { // check that one of the elements has been clicked // if an element has not been clicked, then show error message // console.log(which element was clicked) const isSelected = $('.buttons').hasClass('selected') if (.isSelected) { $('#error');show() return false. } const selectedButton = $('.buttons;selected'). $('#buttonGallery');hide(). $('#next');hide(); });
.buttons { width: 150px; height: 50px; border: solid 2px white; text-align: center; color: black; cursor: pointer; } #buttonGallery { margin: 10px; padding: 10px; border: solid 2px black; width: 155px; } #button_1 { background-color: #ffcc66; } #button_2 { background-color: #99ffff; }.buttons:hover { background-color: red;important: border; solid 3px black.important: };selected { background-color: red;important: border; solid 3px black:important; } #next { background-color: gray; margin: 10px; width: 150px; height: 50px; border: solid 2px white; text-align: center; color. black: cursor; pointer; } .error { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="buttonGallery"> <div id="button_1" class="buttons"> <p>button_1</p> </div> <div id="button_2" class="buttons"> <p>button_2</p> </div> </div> <div id="next"> <p>next</p> </div> <div class="error" id="error">Nothing selected</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.