Javascript 运行函数前已单击检查元素
我有多个元素，用户可以在注意力任务中选择（通过单击它们）。目前，我有一段代码，其中元素在单击时变为红色。完成后，用户将单击“下一步”以查看其他任务。关键的是，在他们继续前进之前，他们必须做出选择 因此，我需要检查用户是否选择了其中一个元素 如果有人在单击“下一步”之前没有选择其中一个元素，那么我将编写一条错误消息。但首先，我在检查元素是否被单击时遇到问题。最好，我还将检查单击了哪个元素 提前感谢您的帮助Javascript 运行函数前已单击检查元素,javascript,Javascript,我有多个元素，用户可以在注意力任务中选择（通过单击它们）。目前，我有一段代码，其中元素在单击时变为红色。完成后，用户将单击“下一步”以查看其他任务。关键的是，在他们继续前进之前，他们必须做出选择 因此，我需要检查用户是否选择了其中一个元素 如果有人在单击“下一步”之前没有选择其中一个元素，那么我将编写一条错误消息。但首先，我在检查元素是否被单击时遇到问题。最好，我还将检查单击了哪个元素 提前感谢您的帮助 <html lang="en" dir="ltr"> <head>
<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>
.按钮{
宽度：150px；
高度：50px；
边框：纯色2px白色；
文本对齐：居中；
颜色：黑色；
光标：指针；
}
#钮扣{
利润率：10px；
填充：10px；
边框：纯色2px黑色；
宽度：155px；
}
#按钮1{
背景色：#ffcc66；
}
#按钮2{
背景色：#99ffff；
}
.按钮：悬停{
背景色：红色！重要；
边框：实心3件装黑色！重要；
}
.选定{
背景色：红色！重要；
边框：实心3件装黑色！重要；
}
#下一个{
背景颜色：灰色；
利润率：10px；
宽度：150px；
高度：50px；
边框：纯色2px白色；
文本对齐：居中；
颜色：黑色；
光标：指针；
}
按钮1
按钮2
下一个
$（'.buttons'）。单击（函数（）{
$（'.buttons'）.removeClass（“选定”）；
$（此）.toggleClass（“选定”）；
});
$（“#下一步”）。单击（函数（）{
//检查是否已单击其中一个元素
//如果未单击某个元素，则显示错误消息
//log（单击了哪个元素）
$（“#buttonGallery”）.hide（）；
$（“#下一步”）.hide（）；
});
按钮将选中class。因此，我们可以使用如下逻辑：
如果按钮
未选择任何类，则未选择任何元素，如：
$('.buttons.selected').length === 0
$('.buttons.selected').length > 0
// Or, simply the else part in the demo.
如果按钮
选择了类，则选择了一个元素，如：
$('.buttons.selected').length === 0
$('.buttons.selected').length > 0
// Or, simply the else part in the demo.
要获取单击的按钮的id
，我们只需使用：
var id = $('.buttons.selected').attr('id');
$（'.buttons'）。单击（函数（）{
$（'.buttons'）.removeClass（“选定”）；
$（此）.toggleClass（“选定”）；
});
$（“#下一步”）。单击（函数（）{
//检查是否已单击其中一个元素
//如果未单击某个元素，则显示错误消息
如果（$（'.buttons.selected'）。长度===0）{
console.log（'请先选择一个元素'）
}否则{
//单击了哪个元素
var id=$（'.buttons.selected'）.attr（'id'）；
日志（id+“已单击”）；
$（“#buttonGallery”）.hide（）；
$（“#下一步”）.hide（）；
}
});
。按钮{宽度：150px；高度：50px；边框：实心2px#fff；文本对齐：居中；颜色：#000；光标：指针}
#按钮平行{边距：10px；填充：10px；边框：实心2px#000；宽度：155px}
#按钮_1{背景色：#fc6}
#按钮2{背景色：#9ff}
.按钮：悬停{背景色：红色！重要；边框：实心3px#000！重要}
.选定{背景色：红色！重要；边框：实心3px#000！重要}
#下一步{背景色：灰色；边距：10px；宽度：150px；高度：50px；边框：实心2px#fff；文本对齐：居中；颜色：#000；光标：指针}
按钮1
按钮2
下一个
如果至少单击了一个元素，则该按钮将选中class。因此，我们可以使用如下逻辑：
如果按钮
未选择任何类，则未选择任何元素，如：
$('.buttons.selected').length === 0
$('.buttons.selected').length > 0
// Or, simply the else part in the demo.
如果按钮
选择了类，则选择了一个元素，如：
$('.buttons.selected').length === 0
$('.buttons.selected').length > 0
// Or, simply the else part in the demo.
要获取单击的按钮的id
，我们只需使用：
var id = $('.buttons.selected').attr('id');
$（'.buttons'）。单击（函数（）{
$（'.buttons'）.removeClass（“选定”）；
$（此）.toggleClass（“选定”）；
});
$（“#下一步”）。单击（函数（）{
//检查是否已单击其中一个元素
//如果未单击某个元素，则显示错误消息
如果（$（'.buttons.selected'）。长度===0）{
console.log（'请先选择一个元素'）
}否则{
//单击了哪个元素
var id=$（'.buttons.selected'）.attr（'id'）；
日志（id+“已单击”）；
$（“#buttonGallery”）.hide（）；
$（“#下一步”）.hide（）；
}
});
。按钮{宽度：150px；高度：50px；边框：实心2px#fff；文本对齐：居中；颜色：#000；光标：指针}
#按钮平行{边距：10px；填充：10px；边框：实心2px#000；宽度：155px}
#按钮_1{背景色：#fc6}
#按钮2{背景色：#9ff}
.按钮：悬停{背景色：红色！重要；边框：实心3px#000！重要}
.选定{背景色：红色！重要；边框：实心3px#000！重要}
#下一步{背景色：灰色；边距：10px；宽度：150px；高度：50px；边框：实心2px#fff；文本对齐：居中；颜色：#000；光标：指针}
按钮1
按钮2
下一个
单击“下一步”按钮后，您需要检查按钮是否选择了类，如果没有选择类，则显示错误消息
$（'#error'）.hide（）；
$（'.buttons'）。单击（函数（）{
$（“#错误”）.hide（）；
$（'.buttons'）.removeClass（“选定”）；
$（此）.toggleClass（“选定”）；
});
$（“#下一步”）。单击（函数（）{
//检查是否已单击其中一个元素
//如果未单击某个元素，则显示错误消息
//log（单击了哪个元素）
常量isSelected=$（'.buttons'）.hasClass（'selected'））