需要单击图像地图区域以选择相应的单选按钮
Need an Image map area clicked to select corresponding radio button
所以我在这里遇到了一些javascript或jquery。基本上,我们拍摄了一张电脑的简单图像,并在其上创建了三个图像映射区域。区域1是显示器屏幕,区域2是塔的正面,区域3是键盘。
在下面,我设置了三行单选按钮,每行有三个按钮,目的是捕捉它们从图像映射中选择的顺序。我试图实现的是,当点击图像地图1,点击第一行上的第一个单选按钮,然后记录从那里选择的顺序,这样,当点击该图像地图的下一个区域,比如区域2时,点击第二行上的第二个按钮。如果点击两次,我还需要它们是不可选择的。我将在稍后添加悬停效果,使其直观。
到目前为止,我已经得到了点击的图像地图区域将从第一行中选择与所选图像地图相对应的单选按钮,比如他们点击区域3,然后选择第一行上的第三个单选按钮。然而,如果他们点击图像地图中的区域2,那么第一行上的第二个按钮就会被选中,我需要它做的是为此选择第二行上的第一个按钮。我希望这是有道理的。基本上,我们试图用单选按钮记录他们选择的顺序。3个图像地图区域,每行三个按钮,共三行。
这就是我到目前为止所拥有的。
<script type="text/javascript">
var order = 0;
function retainOrder(stuff) {
var findMe = "CUST_" + stuff;
var orgLoc = document.getElementById(findMe);
if (orgLoc.checked)
{
order=order + 1;
var newString = "RADIO" + radio + "_" + stuff;
document.getElementById(newString).checked = true;
}
else {
var anotherString = "RADIO" + radio + "_" + stuff;
document.getElementById(anotherString).checked = false;
order=order-1;
}
}
</script>
</head>
<body>
<div id="imagemap"><img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" onclick="document.getElementById('radio0').checked = true">
<map name="Map">
<area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1 "name="CUST:1" value="1" %CUST:1% onclick="document.getElementById('radio0').checked = true"/>
<area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" name="CUST:2" %CUST:2% onclick="document.getElementById('radio1').checked = true"/>
<area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" %CUST:3% name="CUST:3" onclick="document.getElementById('radio2').checked = true"/>
</map>
<p>
<div>
<input type="radio" name="radios" id="radio0" value="0" />
<input type="radio" name="radios" id="radio1" value="1" />
<input type="radio" name="radios" id="radio2" value="2" />
</div>
<div>
<input type="radio" name="radios" id="radio3" value="0" />
<input type="radio" name="radios" id="radio4" value="1" />
<input type="radio" name="radios" id="radio5" value="2" />
</div>
<div>
<input type="radio" name="radios" id="radio6" value="0" />
<input type="radio" name="radios" id="radio7" value="1" />
<input type="radio" name="radios" id="radio8" value="2" />
</div>
如果有人能在这里帮助我,我将不胜感激。非常感谢。
这是一个经过编辑的Vanilla JS解决方案。
window.onload = function () {
var order = 0, checkedAreas = [],
mapClick = function (e) {
var m, n, start,
buttonNumber = e.target.id.split('_').pop(),
buttonName = 'radios' + buttonNumber,
buttons = document.getElementsByName(buttonName);
if (!checkedAreas[buttonNumber]) {
buttons[order].checked = true;
order += 1;
checkedAreas[buttonNumber] = order;
} else {
start = checkedAreas[buttonNumber];
checkedAreas[buttonNumber] = 0;
buttons[start - 1].checked = false;
for (m = 0; m < 3; m++) {
buttons = document.getElementsByName('radios' + m);
for (n = start; n < 3; n++) {
if (buttons[n].checked) {
checkedAreas[m] = checkedAreas[m] - 1;
buttons[n].checked = false;
buttons[n - 1].checked = true;
break;
}
}
}
order -= 1;
}
};
document.getElementById('Map').addEventListener('click', mapClick);
};
jsFiddle的现场演示。
我已经在你的评论后编辑了代码。现在,它在单击某个区域时切换相应的单选按钮,并使用单击顺序移动其他检查。
我已经将命名组添加到您的HTML中,如下所示。您可以通过更改输入组中的顺序来更改设备("列")的顺序。
<input type="radio" name="radios1" id="radio0" value="0" />
<input type="radio" name="radios0" id="radio1" value="1" />
<input type="radio" name="radios2" id="radio2" value="2" />
<input type="radio" name="radios1" id="radio3" value="0" />
<input type="radio" name="radios0" id="radio4" value="1" />
<input type="radio" name="radios2" id="radio5" value="2" />
<input type="radio" name="radios1" id="radio6" value="0" />
<input type="radio" name="radios0" id="radio7" value="1" />
<input type="radio" name="radios2" id="radio8" value="2" />
此外,我已经将areas
的id
中的数字更改为零。
这应该让您知道该做什么:
工作jsFiddle在这里
$(document).ready(function() {
click_order = 0;
$('map area').click(function() {
var areaID = $(this).attr('id');
var areaNum = areaID.split('_')[1];
areaNum = areaNum - 1 + click_order; //-1 b/c radio btns are zero-based
$('#radio' +areaNum).prop('checked',true);
(click_order >= 6) ? click_order = 0 : click_order += 3 ;
});
});
相关文章:
- 如果选择单选按钮,则显示字段
- 选择单选按钮更新2个输入字段
- 如果选择单选按钮,则显示表单
- 选择单选按钮时显示更新按钮
- 选择单选按钮时显示或隐藏窗体
- 如何使用Greasemonkey自动选择单选按钮
- 如何通过单击选项而不是实际按钮本身来选择单选按钮
- JavaScript - 如果选中任何复选框,请选择单选按钮
- 无法在 jquery 中选择单选按钮
- 需要在选择单选按钮上启用提交按钮
- 取消选择单选按钮
- JavaScript-一旦选择单选按钮,就会删除以前的字段集
- 如何在加载时通过jQuery选择单选按钮
- AngularJs:默认情况下未选择单选按钮
- 我需要在选择单选按钮时显示一个下拉框
- 单击时取消选择单选按钮
- 选择单选按钮或下拉菜单项时自动更新PHP变量
- 如何在选择单选按钮后启用提交按钮
- 如何防止用户为每种情况选择单选按钮
- 使用 Json 如何根据数据库中的值选择单选按钮