5

だから私はいくつかのjavascript、またはここでjqueryに苦労しています。基本的に、PC の単純なイメージを取得し、その上に 3 つのイメージ マップ領域を作成しました。エリア 1 はモニター画面、エリア 2 はタワーの前面、エリア 3 はキーボードです。

その下に、各行に 3 つのボタンを配置した 3 行のラジオ ボタンを設定しました。これは、イメージ マップから選択した順序をキャプチャするという考えに基づいています。私が実現しようとしているのは、イメージマップ1をクリックして最初の行の最初のラジオボタンをクリックし、そこから選択の順序を記録して、イメージマップの次の領域がクリックすると、たとえばエリア 2 で、2 行目の 2 番目のボタンがクリックされます。また、2 回クリックしても選択できないようにする必要があります。これを直感的にするために、後でホバー効果を追加します。

これまでのところ、クリックされたイメージ マップ領域が、選択されたイメージ マップに対応する最初の行からラジオ ボタンを選択する場所を取得しました。たとえば、領域 3 をクリックすると、最初の行の 3 番目のラジオ ボタンが選択されます。ただし、イメージ マップから領域 2 をクリックすると、最初の行の 2 番目のボタンが選択されます。そのためには、2 行目の 2 番目のボタンを選択する必要があります。これが理にかなっていることを願っています。基本的に、ラジオ ボタンでの選択の順序を記録しようとしています。3 つのイメージ マップ エリア、各行に 3 つのボタン、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" />

idまた、 s の数値areasをゼロベースに変更しました。

于 2013-08-29T17:56:28.940 に答える