JQuery и использование переменных и функций - PullRequest
Новая
       16

JQuery и использование переменных и функций

0 голосов
/ 14 марта 2012

Я работаю над программой оценки jquery, которая находится в форме тега.Когда я закончу, это будет довольно большой сценарий.Для многих задач у меня есть около 50 флажков в группе, которые, если они отмечены, будут продвигать слайдер пользовательского интерфейса на один шаг вперед.Если снять флажок, он отодвигает ползунок назад на один.

Все поля скрыты, пока я не нажму на переключатель, который одновременно скрывает флажки, покажет, сколько флажков установлено, и вернетномер на слайдер.

У меня есть функция, которая также корректирует общую расчетную цену каждый раз, когда флажок или снят флажок.

Чувствую, что это форма ...... У меня есть файл contact.phpкоторый извлечет всю информацию из формы и отправит по электронной почте владельцу сайта.

Теперь большой вопрос ....... У меня есть 50 флажков ...

Пример HTML 

  <input type="checkbox" id="R_C-helpPage01" name="helpPage01" value="helpPage01" class="R_C R_C-width20" />
  <label id="R_C-helpPage01" class="W_E"></label> 

  <input type="checkbox" id="R_C-helpPage02" name="R_C-helpPage02" value="helpPage02" class="R_C R_C-width20" /> 
  <label id="R_C-helpPage02" class="R_C"></label> 

  <input type="checkbox" id="R_C-helpPage03" name="R_C-helpPage03" value="helpPage03" class="R_C R_C-width20" /> 
  <label id="R_C-helpPage03" class="R_C"></label>

Пример некоторых переменных 

 var helpPage01 = 'Home Page';
 var helpPage02 = 'About Us';
 var helpPage03 = 'Our Services';
 var helpPage04 = 'Contact Us';

Слышать - это основная функция, в которой я не уверенкак заставить все эти кнопки проверки использовать только эту функцию без необходимости делать 50 копий функции для каждого флажка.

Мое первое предположение примерно такое: 

  $('#And 47 more ID's, #helpPage03, #helpPage02, #helpPage01').click(function() 
                                                                and bla bla bla

Функция каксейчас .. 

            $helpPage.click(function () {
    if ($pages.val() == 20) {
    alert('Please call for a bulk estimate: ' + phoneNumber);
            return false;
            } 

if ($helpPage.is(':checked'))
            {
    var s = $pageSlider,
            val = s.slider("value"),
            step = s.slider("option", "step");
            s.slider("value", val + step);
            $pages.val(("value", val + step));
            $amount.val([("value", val + step) * pageAmount] / [$daySlider.slider("value")]);
            $slideCalc.click();
            }

else {
            var s = $pageSlider,
            val = s.slider("value"),                
            step = s.slider("option", "step");                
            s.slider("value", val - step);        
            $pages.val(("value", val - step));        
            $amount.val([[("value", val - step) * pageAmount] /  $daySlider.slider("value")]]);
            $slideCalc.click();
            }                   
    });

Подробнее 

    $('#R_C-helpPage01').html(helpPage01 + '<br />');
    $('#R_C-helpPage02').html(helpPage02 + '<br />');
    $('#R_C-helpPage03').html(helpPage03 + '<br />');
            $('#R_C-helpPage04').html(helpPage04 + '<br />');

Если вам нужна дополнительная информация, чтобы сделать разумный удар, дайте мне знать.

1 Ответ

1 голос
/ 14 марта 2012

Для каждого флажка вы должны добавить дополнительный атрибут rel и дополнительный class 

  <input type="checkbox" rel="1" id="R_C-helpPage01" name="helpPage01" value="helpPage01" class="R_C R_C-width20 helpcb" />
  <label id="R_C-helpPage01" class="W_E"></label> 

  <input type="checkbox" rel="2" id="R_C-helpPage02" name="R_C-helpPage02" value="helpPage02" class="R_C R_C-width20 helpcb" /> 
  <label id="R_C-helpPage02" class="R_C"></label> 

  <input type="checkbox" rel="3" id="R_C-helpPage03" name="R_C-helpPage03" value="helpPage03" class="R_C R_C-width20 helpcb" /> 
  <label id="R_C-helpPage03" class="R_C"></label>

Теперь, вместо того, чтобы связывать элемент флажка 50 раз, выможно просто использовать селектор и привязать все флажки к одной функции.Приведенный ниже код выбирает все флажки, которые имеют класс "helpcb" 

$('input[type="checkbox"].helpcb').click(function(e){
  var id = $(this).attr('rel'); // This will extract the "rel" attribute of the checkbox that was checked
  // do other stuff
});

Кроме того, вместо определения 50 различных переменных для страниц справки, вы должны использовать массив 

var helpPage = ['About Us', 'Contact Us', 'Other page'];
alert(helpPage[1]); // Alerts 'contact us'
...