Potrzebujesz obszaru mapy obrazu klikniętego, aby wybrać odpowiedni przycisk radiowy

Tak więc mam problemy z niektórymi javascriptami lub jquery tutaj. Zasadniczo zrobiliśmy prosty obraz komputera i stworzyliśmy na nim trzy odwzorowane obszary obrazu. Obszar 1 to ekran monitorów, obszar 2 to przód wieży, a obszar 3 to klawiatura.Potrzebujesz obszaru mapy obrazu klikniętego, aby wybrać odpowiedni przycisk radiowy

Poniżej ustawiłem trzy rzędy przycisków opcji, z trzema przyciskami w każdym rzędzie, z ideą przechwytywania kolejności, którą wybierają z mapy obrazu. Próbuję to zrobić, gdy kliknie się na mapę obrazkową 1, aby pierwszy przycisk radiowy w pierwszym wierszu został kliknięty, a następnie nagrać kolejność zaznaczenia stamtąd, tak aby po przejściu do następnego obszaru mapy obrazu kliknięty, powiedz obszar 2, drugi przycisk w drugim rzędzie jest kliknięty. Też potrzebuję ich by być niewybieranym jeśli kliknąłem na dwa razy. Dodam efekty hover po raz drugi, aby było to intuicyjne.

Jak dotąd mam to miejsce, w którym kliknięty obszar mapy obrazu wybiera przycisk radiowy z pierwszego wiersza, który odpowiada wybranej mapie obrazu, powiedzmy, że kliknął obszar 3, następnie trzeci przycisk opcji w pierwszym wierszu jest wybrany. Jeśli jednak klikną obszar 2 z mapy obrazu, zostanie wybrany drugi przycisk w pierwszym rzędzie, a ja potrzebuję go do tego, aby wybrać drugi przycisk w drugim wierszu. Mam nadzieję, że to ma sens. Zasadniczo próbujemy nagrać kolejność ich wyboru za pomocą przycisków radiowych. 3 obszary mapy obrazu, trzy przyciski w rzędzie, z trzema rzędami.

To jest to, co do tej pory miałem.

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

Jeśli ktokolwiek może mi pomóc, byłbym naprawdę wdzięczny. Dziękuję Ci.

Źródło

2013-08-29 William

Zobacz mój przykład poniżej. Istnieje kilka sposobów, aby wybrać przyciski opcji, użyłem atrybutu "ID" dla każdego przycisku opcji. Nie wiesz, co chcesz zrobić po wybraniu wszystkich 3, więc zresetowałem licznik, aby zacząć od nowa. Opcjonalnie możesz umieścić u góry zdarzenia kliknięcie: 'if (click_order> = 6) return false;' Jeśli jakaś odpowiedź jest dla ciebie przydatna, wykonaj upomnienie. Pamiętaj, aby wybrać prawidłową odpowiedź, gdy zostanie spełniony, aby zamknąć pytanie. – gibberish

Dziękuję bardzo, to bardzo pomaga. Jest jedna rzecz, o której być może zapomniałem, ale potrzebuję jej również nie do wybrania, aby usunięto ich wybór z przycisków opcji, jeśli kliknięto dwa razy. Zamierzam dodać efekty hover do mapy obrazu, więc stanie się to intuicyjne później. – William

To naprawdę inne pytanie. Sugeruję, aby zamknąć to pytanie (zebrać wszystkie pomocne odpowiedzi i wybrać odpowiedź, którą lubisz najbardziej) i sformułować inne pytanie.Masz już dwa jsFiddle, na których możesz zbudować swoje nowe pytanie (wskazówka: naciśnij przycisk "Widelec"). * Umieszcza również twoje nowe pytanie na górze listy. * – gibberish

Powinno to daje wyobrażenie o tym, co należy zrobić:

working jsFiddle here

$(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 ; 
    }); 
});

Źródło

2013-08-29 17:14:47 gibberish

Oto edytowany rozwiązanie 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); 
};

A live demo at jsFiddle.

Edytowałem kod po Twoim komentarzu. Teraz przełącza odpowiedni przycisk radiowy po kliknięciu obszaru i przenosi inne czynności kontrolne za pomocą kolejności klikania.

Dodałem nazwane grupy do kodu HTML, jak poniżej. Możesz zmienić kolejność urządzeń ("kolumn"), zmieniając kolejność w grupach wejściowych.

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

Także zmieniłem numery id s od areas do zera.

Źródło

2013-08-29 17:56:28 Teemu

Ach, dziękuję, powinienem być bardziej konkretny, wierzę w część nie-selekcji, ponieważ potrzebuję ich "nie do wybrania" – William

@ William Hmm ... to powoduje dużo pętli, przy zmianie pozostałych wyborów. Muszę o tym pomyśleć przez chwilę:). – Teemu

Dziękuję za pomoc, staram się również ją uruchomić, więc jeśli znajdę rozwiązanie, opublikuję ją tutaj. Dzięki jeszcze raz! – William

Potrzebujesz obszaru mapy obrazu klikniętego, aby wybrać odpowiedni przycisk radiowy

Odpowiedz

Powiązane problemy