Fatal编程技术网
  • javascript/
  • Javascript 需要单击图像地图区域以选择相应的单选按钮

Javascript 需要单击图像地图区域以选择相应的单选按钮

javascript jquery html

Javascript 需要单击图像地图区域以选择相应的单选按钮,javascript,jquery,html,Javascript,Jquery,Html,所以我正在努力使用一些javascript，或者jquery。基本上，我们拍摄了一张pc的简单图像，并在其上创建了三个图像映射区域。区域1是监视器屏幕，区域2是塔的前部，区域3是键盘 下面我设置了三行单选按钮，每行有三个按钮，目的是捕获他们从图像地图中选择的顺序。我试图实现的是，单击图像映射1以单击第一行上的第一个单选按钮，然后记录从那里选择的顺序，这样，当单击图像映射的下一个区域（例如区域2）时，就会单击第二行上的第二个按钮。我还需要他们是不可选择的，如果点击两次。我将在以后添加悬停效果，使其

所以我正在努力使用一些javascript，或者jquery。基本上，我们拍摄了一张pc的简单图像，并在其上创建了三个图像映射区域。区域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>


var阶数=0；
函数保留顺序（stuff）{
var findMe=“客户”+材料；
var orgLoc=document.getElementById（findMe）；
如果（原位置已选中）
{
订单=订单+1；
var newString=“RADIO”+无线电+“”+东西；
document.getElementById（newString）.checked=true；
}
否则{
var anotherString=“RADIO”+无线电+“\u”+东西；
document.getElementById（另一个字符串）.checked=false；
订单=订单-1；
}
}
如果有人能在这里帮助我，我将不胜感激。多谢各位

这会让你知道该怎么做：

这是一个经过编辑的香草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);
};

window.onload=函数（）{
变量顺序=0，检查区域=[]，
mapClick=函数（e）{
变量m，n，开始，
buttonNumber=e.target.id.split（“”“）.pop（），
按钮名称='收音机'+按钮编号，
buttons=document.getElementsByName（buttonName）；
如果（！checkedAreas[按钮编号]）{
按钮[顺序]。选中=真；
订单+=1；
选中区域[按钮编号]=订单；
}否则{
开始=选中区域[按钮编号]；
选中区域[按钮编号]=0；
按钮[start-1]。选中=false；
对于（m=0；m<3；m++）{
按钮=document.getElementsByName（'radios'+m）；
对于（n=开始；n<3；n++）{
如果（按钮[n]。选中）{
checkedAreas[m]=checkedAreas[m]-1；
按钮[n]。选中=错误；
按钮[n-1]。选中=真；
打破
}
}
}
订单-=1；
}
};
document.getElementById（'Map'）.addEventListener（'click'，mapClick）；
};

我在你的评论后编辑了代码。现在，它在单击某个区域时切换相应的单选按钮，并使用单击顺序移动其他检查

我已将命名组添加到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" />
此外，我还将
区域的
id
s中的数字更改为零。
请参见下面的示例。有几种方法可以选择单选按钮，我为每个单选按钮使用了
ID
属性。不确定当所有3个都被选中时你想做什么，所以我重置计数器重新开始。或者，您可以在单击事件的顶部放置：
如果（单击顺序>=6）返回false如果任何答案对你有帮助，请投票。记住在满意时选择正确答案，以便结束问题。非常感谢，这非常有帮助。有一件事我可能忽略了提到，但是，我也需要它是不可选择的，以便它删除他们的选择从单选按钮，如果点击两次。我将在图像贴图中添加悬停效果，以便以后更直观。这真的是一个不同的问题。我建议你结束这个问题（对所有有用的答案进行投票，并选择你最喜欢的答案），然后制定一个不同的问题。您已经有两个jsfiddle用于构建新问题（提示：按
Fork
按钮）。这也将把你的新问题放在列表的首位。啊，谢谢你，我应该更具体一些，我相信在联合国选择的部分，因为我确实需要它们是“不可选择的”@William Hmm。。。当重新排列剩余的选择时，这会导致大量循环。我得考虑一下：）。谢谢你的帮助，我也在努力让它工作，所以如果我找到解决方案，我会把它贴在这里。再次感谢！呃，这一次真的让我头痛不已，我习惯于使用javascript来制作导航栏和表单，这是一个艰难的过程！再次感谢你的帮助！我可以吻你！！！！j/k无论如何，这非常接近我所需要的，但是，不是分配单选按钮唯一id，是否有办法使其成为屏幕始终为第1行，pc始终为第2行，键盘始终为第3行？这样，我们的程序就可以在列表中运行，看看他们在哪里选择了什么顺序？例如，当我开始clic时

<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" />