1

Всем доброго времени суток. Есть некий набор инпутов с data-link, который может быть задан в нескольких видах. См.пример:

var currentUrl = window.location.href;
$(".options-list .field").each(function() {
  var radio = $(this).find(".radio");
  var link = $(radio).data("link");
  if (link == currentUrl) {
    $(this)
      .find(".radio")
      .prop("checked", true);
  }
  if (link != "") {
    $(radio).attr("onclick", "window.location='" + link + "'");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options-list" id="options-28-list">
  <div class="field">
    <input data-link="/alfa-living-room-set-redeyef-brown.html" class="radio" name="options[28]" id="options_28_2" value="43" data-selector="options[28]" type="radio">
    <label class="label" for="options_28_2"><span>Value 1</span></label>
  </div>
  <div class="field">
    <input data-link="https://example.com/alfa-living-room-set-redeyef-brown.html" class="radio" name="options[28]" id="options_28_3" value="44" data-selector="options[28]" type="radio">
    <label class="label" for="options_28_3"><span>Value 2</span></label>
  </div>
  <div class="field">
    <input data-link="" class="radio" name="options[28]" id="options_28_4" value="45" data-selector="options[28]" type="radio">
    <label class="label" for="options_28_4"><span>Value 3</span></label>
  </div>
</div>

Как видим, атрибут может быть задан:

Мне нужно, чтоб при наличии заполненного атрибута, при нажатии происходил переход на заданную страницу, а при совпадении текущего домена с указанной ссылкой, инпут получал себе чекбокс.

Итак вопросы:

  1. Как бороться с отсутствием домена в некоторых ссылка? Ведь если ссылка задана как /test.html, то и переход ведет в никуда. То же самое и с чекбоксом. Заданная ссылка не будет совпадать с текущим адресом.
  2. Правильно ли выбрано решение с добавлением атрибута при переходе на другую страницу? Или лучше было бы отдельно написать функцию через .click? В целом, можно ли код записать аккуратнее?

Спасибо!

1 ответ 1

1
  1. Добавлять location.origin
  2. Правильно, в принципе, ничего особо ужасного в этом нет.
    Эффективнее будет добавление единого слушателя события для всех таких инпутов - но т.к. их мало, сойдет и через onclick.

var currentUrl = window.location.href, 
    interval;

$(".options-list .field").each(function() {
  var radio = $(this).find(".radio"), 
      link  = radio.data("link");
  if (!link.length)
    return; 
  // дополняем ссылку, если она относительная 
  if (link.charAt(0) === '/')
    link = window.location.origin + link; 
  // совпадает с текущим href - отмечаем; иначе назначаем обработчик 
  if (link == currentUrl)
    radio.prop("checked", true);
  else
    radio.attr("onclick", `console.clear(); console.log('${link}');`);  //radio.attr("onclick", "window.location='" + link + "'");
}); 

/* Пример добавления слушателя события. Тот код что выше, можно так же
   вынести в обработчик клика - чтобы проверять лишь целевой элемент,
   и сразу выполнять соответствующие действия. */
$(".options-list .field").find(".radio")
  .on("click", myClickListener);

function myClickListener() {
  console.log(`(data-link: ${this.dataset.link || '<empty>'})`); 
  clearInterval(interval); 
  interval = setInterval(console.clear, 3000); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options-list" id="options-28-list">
  <div class="field">
    <input data-link="/alfa-living-room-set-redeyef-brown.html" class="radio" name="options[28]" id="options_28_2" value="43" data-selector="options[28]" type="radio">
    <label class="label" for="options_28_2"><span>Value 1 (relative)</span></label>
  </div>
  <div class="field">
    <input data-link="https://example.com/alfa-living-room-set-redeyef-brown.html" class="radio" name="options[28]" id="options_28_3" value="44" data-selector="options[28]" type="radio">
    <label class="label" for="options_28_3"><span>Value 2 (absolute)</span></label>
  </div>
  <div class="field">
    <input data-link="/js" class="radio" name="options[28]" id="options_28_4" value="45" data-selector="options[28]" type="radio">
    <label class="label" for="options_28_4"><span>Value 3 (current href)</span></label>
  </div>
  <div class="field">
    <input data-link="" class="radio" name="options[28]" id="options_28_5" value="46" data-selector="options[28]" type="radio">
    <label class="label" for="options_28_5"><span>Value 4 (empty)</span></label>
  </div>
</div>

1
  • Отлично, спасибо! Commented 6 апр. 2018 в 12:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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