主页 / 问题 / 810385
Accepted
Alexey Giryayev
Asked:2020-04-06 17:07:56 +0000 UTC2020-04-06 17:07:56 +0000 UTC

匹配当前域时检查设置

  • 772

再会。有一组特定的输入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？一般情况下，能不能把代码写的更准确一些？

谢谢！

javascript

1 个回答

  1. Best Answer
    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

相关问题