JQuery переключатели, метки, события изменения и нажатия - PullRequest
Новая
       26

JQuery переключатели, метки, события изменения и нажатия

1 голос
/ 17 декабря 2010

Я пытаюсь разработать форму, которая имеет несколько переключателей.При выборе переключателя отобразится набор параметров, связанных с этим переключателем.Нажатие на ярлык (в данном случае это будет изображение) должно сделать то же самое.У меня работает кнопка с переключателем, и у меня проблемы с метками.При нажатии на ярлык выбирается правильная кнопка-переключатель ... но содержимое этой кнопки не отображается.Я знаю, что, вероятно, могу обойти это так же, как я обращаюсь к событиям изменения переключателей, но я не хочу вводить больше кода, чем мне нужно.С учетом вышесказанного я также знаю, что должен быть более эффективный способ обработки событий изменения переключателей, поскольку все они выполняют одно и то же действие, и меняется только значение.

Вот урезанная версияс чем я работаюЯ ищу кого-то, кто бы помог мне правильно выполнить эту работу и, что не менее важно, устранить недостатки в моем подходе к кодированию. 

<!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
      $('#contain-me .option').hide();
      $('#contain-me .option.option-1').addClass('chosen').show();

      $('.label').click(function() {
          $(this).prev('input[type=radio]:first').attr('checked', 'checked');
      });

      $("#payment-visual-selector :radio[name='pt']").change(function(){
          var newVal = $(":radio[name='pt']:checked").val();       
          if (newVal === "1") {
              $('#contain-me .option').hide();
              $('#contain-me .option.option-1').addClass('chosen').show();
          } else if (newVal === "2") {
              $('#contain-me .option').hide();
              $('#contain-me .option.option-2').addClass('chosen').show();
          } else if (newVal === "3") {
              $('#contain-me .option').hide();
              $('#contain-me .option.option-3').addClass('chosen').show();
          } else if (newVal === "4") {
              $('#contain-me .option').hide();
              $('#contain-me .option.option-4').addClass('chosen').show();
          } else if (newVal === "5") {
              $('#contain-me .option').hide();
              $('#contain-me .option.option-5').addClass('chosen').show();
          } else if (newVal === "6") {
              $('#contain-me .option').hide();
              $('#contain-me .option.option-6').addClass('chosen').show();
          }       
      });
  });
  </script>
  </head>

  <body>

  <h3>Visual Selector</h3>
  <div class="row" id="payment-visual-selector">
    <p><input type="radio" value="1" id="pt-1" name="pt" class="option-1 radio" checked="checked" /><label class="label" for="pt-1"><img src="img/icon-1a.gif" alt="icon-1a" class="option-1" /> <img src="img/icon-1b.gif" alt="icon-1b" class="option-1" /> <img src="img/icon-1c.gif" alt="icon-1c" class="option-1" /> <img src="img/icon-1d.gif" alt="icon-1d" class="option-1" /></label></p>
    <p><input type="radio" value="2" id="pt-2" name="pt" class="option-2 radio" /><label class="label" for="pt-2"><img src="img/icon-2.gif" alt="icon-2" class="option-2" /></label> <a href="#" class="additional-info">Link for Option #2</a></p>
    <p><input type="radio" value="3" id="pt-3" name="pt" class="option-3 radio" /><label class="label" for="pt-3"><img src="img/icon-3.gif" alt="icon-3" class="option-3" /></label> <a href="#" class="additional-info">Link for Option #3</a></p>
    <p><input type="radio" value="4" id="pt-4" name="pt" class="option-4 radio" /><label class="label" for="pt-4"><img src="img/icon-4.gif" alt="icon-4" class="option-4" /></label></p>
    <p><input type="radio" value="5" id="pt-5" name="pt" class="option-5 radio" /><label class="label" for="pt-5"><img src="img/icon-5.gif" alt="icon-5" class="option-5" /></label></p>
    <p><input type="radio" value="6" id="pt-6" name="pt" class="option-6 radio" /><label class="label" for="pt-6"><img src="img/icon-6.gif" alt="icon-6" class="option-6" /></label></p>
    <div class="clear"></div>
  </div>

  <h3>Content Block</h3>
  <div id="contain-me">
    <div class="option option-1">
      Option 1 content goes here
    </div>
    <div class="option option-2">
      Option 2 content goes here
    </div>
    <div class="option option-3">
      Option 3 content goes here
    </div>
    <div class="option option-4">
      Option 4 content goes here
    </div>
    <div class="option option-5">
      Option 5 content goes here
    </div>
    <div class="option option-6">
      Option 6 content goes here
    </div>
  </div>

  </body>
  </html>

1 Ответ

4 голосов
/ 17 декабря 2010

С точки зрения ужесточения кода, вот начало: 

 $("#payment-visual-selector :radio").change( function(){ 
    var otherClass = '.option.option-' + $(this).val();
    $('#contain-me '+otherClass)
        .addClass('chosen').show()
        .siblings().removeClass('chosen').hide();     
 });

Если проблема с переключателем change Событие не вызвано щелчком метки, попробуйте что-то вроде этого: 

$('.label').click( function(){
  $(this).prev('input:radio')
      .attr('checked', true)
      .change(); // Manually trigger the change event
  });
});
...