0
 <div class="b-filter__field" id="sort_selector">
    {%if $get == "t"%}<span>{%else%}<a href="" data-value="t">{%/if%}По популярности{%if $get == "t"%}</span>{%else%}</a>{%/if%}
    {%if $get == "v"%}<span>{%else%}<a href="" data-value="v">{%/if%}По времени публикации{%if $get == "v"%}</span>{%else%}</a>{%/if%}
    {%if $get == "r"%}<span>{%else%}<a href="" data-value="r">{%/if%}По рейтингу{%if $get == "r"%}</span>{%else%}</a>{%/if%}
</div>

<script>
$(document).ready(function(){
    $("#sort_select").bind("click", function(e){
        e.preventDefault();
        var v = $("a").data('value');
        console.log(v); // Он даже не доходит до сюда, а по ссылке все равно переходит.
        var loc = location.href + "&sort=" + v;
        document.location.href = loc;
    });
});

Хочу чтобы при клике добавлялся get-параметр к ссылке, но не могу получить значение пользовательского атрибута. Подскажите, в чем ошибка?

1
  • У вас id="sort_selector, а вы используете $("#sort_select")
    – Andrew B
    26 окт 2016 в 13:50

1 ответ 1

1

$(document).ready(function(){
  //селектор должен содержать в точности такой же id, какой используется в коде, кроме того, при селекции только по id div'a, событие будет срабатывать по клике на див, а не на ссылку, поэтому уже на этом шаге происходила ошибка
  // выбираются все теги a внутри элемента с id = sort_selector
    $("#sort_selector > a").bind("click", function(e){
      //убираем дефолтные события
        e.preventDefault();
      //получаем в v значение href cсылки, в случае, если оно заполнено для тега a, то нужно включить его в общую сумму z, таким образом, чтобы получилось
      //z=window.location.toString()+v+"&sort="+$(this).attr('data-value');
        var v = $(this).attr('href'),separator,z;
      //проверяем, нет ли в адресной строке ?, чтобы не использовать его повторно
      (window.location.search.substring(-1,1))?separator="&":separator="?";
        //собираем ссылку из адресной строчки+сепаратора (полученного на предыдущем шаге)+get параметра sort+атрибута data-value элемента a, по которому был произведен клик
        z=window.location.toString()+separator+"sort="+$(this).attr('data-value');
      //выводим получившийся линк в консоль
        console.log(z);
      //раскомментировать для перехода - осушествляем переход
     //window.location =z;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="b-filter__field" id="sort_selector">
  <!-- теги должны иметь правильную вложенность, либо span внутри a, либо наоборот, чаще всего первый вариант предпочтительнее, хотя оба элемента инлайновые-->
   <a href="#1" data-value="t"><span>По популярности</span></a>
   <a href="#2" data-value="v"><span>По времени публикации</span></a>
   <a href="#3" data-value="r"><span>По рейтингу</span></a>
</div>

13
  • что в данном коде отличается от кода в вопросе?
    – Grundy
    26 окт 2016 в 14:02
  • @Grundy , исправлен селектор, исправлена вложенность тегов, изменены обращения к несуществующим атрибутам, установлена проверка на наличие "?" в адресной строке, воизбежание повторяющихся или недостающих символов, приведен работоспособный код
    – Rager
    26 окт 2016 в 14:12
  • 1
    @TimurMusharapov первое - получение атрибута href ссылки, второе - проверка, есть ли в адресной строке знак вопроса, чтобы не вставить его второй раз window.location имеет в себе несколько свойств, одно из них search отвечает за строку после знака вопроса, включая его. Метод substring делает из строки подстроку по первому символу.
    – Rager
    26 окт 2016 в 14:23
  • 1
    @TimurMusharapov использовать метод indexOf()
    – Rager
    26 окт 2016 в 14:31
  • 1
    @TimurMusharapov, в данном случае без разницы: сначала идет объявление переменной v и сразу инициализация ее значением, и далее объявляются через запятую переменные separator и z
    – Grundy
    27 окт 2016 в 7:16

Ваш ответ

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

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