5

所以我在这里用一些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>

如果有人可以在这里帮助我，我将不胜感激。谢谢你。

4

2 回答 2

2

这是一个经过编辑的 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" />

此外，我已将ids 中的数字更改areas为从零开始。

于 2013-08-29T17:56:28.940 回答
1

这应该让您知道该怎么做：

在这里工作 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 ;
    });
});
于 2013-08-29T17:14:47.590 回答