將 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>

我使用此代碼片段來檢測選擇的模式並將其添加到 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>

在這里擺弄

Answer 2

嘗試這個 ：-

$(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          
});

演示

Answer 3

檢查我為你修改的這個小提琴： https : //jsfiddle.net/so2fw1o4/1/

將此添加到您的myRadio.on('change', function

//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 4

盡管您在這里已經有了一些答案，但我想我會發布另一種選擇（不一定更好）。

您可以為每個鏈接添加一個類，處理它們的點擊事件，並自己設置新窗口的位置以達到類似的效果。

以下是修改小提琴中的 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'
      );
    }
  });
});

我只是在下拉列表中的每個a元素中添加了mode-link類，將單選按鈕值更改存儲在新變量mode ，添加了click事件處理程序，最后處理了單擊事件以創建新的 href 值並打開一個新的具有該位置的選項卡/窗口。

如果您不想要新標簽/窗口，您可以簡單地設置location.href = newHref但這不會模仿新標簽/窗口的打開，因此我使用window.open() 。

我在這里有一個修改過的示例： JSFiddle