0

Добрый день! У меня, друзья, к вам вопросы. Есть, значит, сайт, на котором есть несколько ссылок типа:

<a href="#" class="go" data-extend="param_norm" class="spec_button"></a>
<a href="#" class="go" data-extend="param_optima" class="spec_button"></a>
<a href="#" class="go" data-extend="param_prof" class="spec_button"></a>

В параметр data-extend передается специальное значение, которое необходимо для вариации принятия решения в скрипте по расчету стоимости тарифа.

По клику получается значение этого параметра:

$('a.go').click( function(event){ // ловим клик по ссылки с id="go"
            event.preventDefault(); // выключаем стандартную роль элемента
            $('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
             function(){ // после выполнения предъидущей анимации
                  name_input = false;
                  email_input = false;
                  TypePay = $(".go").attr('data-extend');   
                  console.log(TypePay);               
                $('#modal_form') 
                    .css('display', 'block') // убираем у модального окна display: none;
                    .animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность одновременно со съезжанием вниз
            });
          });

Как видно, в TypePay передается этот параметр, а затем выводится в консоль. Почему вне зависимости от того, какую ссылку нажали, всегда в консоль выдает param_norm, ведь есть ссылки, где параметр равен param_optima или param_prof?

Самое смешное, в песочнице все работает, а на сайте нет(. http://jsfiddle.net/whsLom5g/6/

1

2 ответа 2

1

Атрибут ID у любого элемента должен быть уникальным. У вас данный атрибут одинаков для каждой ссылки, поэтому jQuery выполняет операции только с первой найденной ссылкой. Попробуйте так:

<a href="#" data-extend="param_norm" class="go spec_button"></a>
<a href="#" data-extend="param_optima" class="go spec_button"></a>
<a href="#" data-extend="param_prof" class="go spec_button"></a>

Кусок JS:

$('a.go').click( function(event){ // ловим клик по ссылки с class="go"
            event.preventDefault(); // выключаем стандартную роль элемента
            $('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
             function(){ // после выполнения предъидущей анимации
                  name_input = false;
                  email_input = false;
                  TypePay = $(this).attr('data-extend');   
                  console.log(TypePay);               
                $('#modal_form') 
                    .css('display', 'block') // убираем у модального окна display: none;
                    .animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность одновременно со съезжанием вниз
            });
          });
1

Это логично, так как id не может повторяться.
Задайте для ссылок, например, data-role="select".
Вместо $('a#go').click(... напишите $('a[data-role=select]').click( и вместо этого TypePay = $("#go").attr('data-extend'); напишите TypePay = $(this).attr('data-extend');.

2
  • Да я исправил, это старый вариант, верстальщик просто дал мне такую верстку с одинаковыми id и логику написал, соответственно, так. С классами тоже не работает.
    – IntegralAL
    15 окт 2014 в 7:31
  • Можете показать сейчас полный код?
    – Diefair
    15 окт 2014 в 7:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.