将javascript var添加到href

Question

我有不同链接的下拉菜单，在此之前我有 2 个单选按钮，您可以在其中选择“模式”。

<div class="radio">
  <label><input type="radio" name="mode" checked="checked" value="mode1">MODE1</label>
</div>
<div class="radio">
  <label><input type="radio" name="mode" value="mode2">MODE2</label>
</div>


<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose site
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a target="_blank" href="http://example.com/index.php?mode=">Site1</a></li>
    <li><a target="_blank" href="http://example.com/index.php?mode=">Site2</a></li>
    <li><a target="_blank" href="http://example.com/index.php?mode=">Site3</a></li>
  </ul>
</div>

我使用这段代码 sn-p 来检测选择了什么模式并将其添加到 var 模式：

$(document).ready(function() {
    var myRadio = $('input[name=mode]');
    myRadio.on('change', function () {
        var mode=myRadio.filter(':checked').val();
    });            
});

我想做的是将javascript var $mode添加到href标签。

href="http://example.com/index.php?mode={$mode}

我怎么能做到这一点？

我认为唯一的方法是使用一些 javascript 函数来做到这一点？ 它不可能只“打印” var 到 href ？

JSFIDDLE：https://jsfiddle.net/DTcHh/18683/

Answer 1

使用data-* 属性保持静态href 值以供以后使用。 .change() 最初会触发 change 事件来设置 href 属性的值。

$(document).ready(function() {
  var myRadio = $('input[name=mode]');
  myRadio.on('change', function() {
    var mode = myRadio.filter(':checked').val();
    $('ul.dropdown-menu a').prop('href', function() {
      return this.getAttribute('data-href') + mode;
    })
  }).change();
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="radio">
  <label>
    <input type="radio" name="mode" checked="checked" value="mode1">MODE1</label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="mode" value="mode2">MODE2</label>
</div>


<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose site
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a target="_blank" href="http://site1.com/index.php?mode=" data-href="http://site1.com/index.php?mode=">Site1</a>
    </li>
    <li><a target="_blank" href="http://site2.com/index.php?mode=" data-href="http://site2.com/index.php?mode=">Site2</a>
    </li>
    <li><a target="_blank" href="http://site3.com/index.php?mode=" data-href="http://site3.com/index.php?mode=">Site3</a>
    </li>
  </ul>
</div>

Fiddle here

Answer 2

检查我为你修改的这个小提琴：https://jsfiddle.net/so2fw1o4/1/

将此添加到您的 myRadio.on('change', 函数中

//here change the urls
    $('.dropdown-menu a').each(function(){
      $(this).attr('href', $(this).data('url') + mode)
    })

您需要为每个链接添加数据属性以存储初始链接

<a target="_blank" data-url="http://site. com/index.php?mode=" href="http://site. com/index.php?mode=">Site1</a>

Answer 3

试试这个：-

$(document).ready(function() {
    var myRadio = $('input[name=mode]');
    myRadio.on('change', function () {
        var mode=myRadio.filter(':checked').val();
        $("ul.dropdown-menu li a").each(function(){
           $(this).attr('href',$(this).attr('href').split('?')[0] + "?mode=" + mode);
        });
    }).change(); //trigger on page load          
});

DEMO

Answer 4

虽然您在这里已经有了一些答案，但我想我会发布另一个替代方案（不一定更好）。

您可以为每个链接添加一个类，处理它们的点击事件，并自己设置新窗口的位置以达到类似的效果。

下面是sn-p修改你fiddle中的jQuery的代码：

$(document).ready(function() {
  var myRadio = $('input[name=mode]');
  var mode = myRadio.filter(':checked').val(); // Initial setting

  myRadio.on('change', function () {
    mode=myRadio.filter(':checked').val();
  });

  $('.mode-link').click(function(e) {
    e.preventDefault(); //stop the click action

    // Check if the mode has been set
    if (mode) {
      // Create the href value
      var newHref = $(this).attr('href') + mode;

      // Open the new tab/window with the correct href value
      window.open(
        newHref,
        '_blank'
      );
    }
  });
});

我只是简单地将mode-link 类添加到下拉列表中的每个a 元素中，将单选按钮值更改存储在新变量mode 中，添加click 事件处理程序，最后将点击事件处理为创建新的 href 值并使用该位置打开一个新选项卡/窗口。

如果您不想要新标签/窗口，您可以简单地设置location.href = newHref，但这不会模仿新标签/窗口的打开方式，因此我使用window.open()。

我在这里有一个修改过的示例：JSFiddle