通過Dropdown更改Href中的網址

-1

我的網站上有多個下拉菜單，可通過下拉菜單更改網址。但問題是，第一個Dropdown也改變了第二個HREF的值。我怎樣才能解決這個問題？隨着各功能沒有什麼變化..通過Dropdown更改Href中的網址

$(function() { 
 
    $('.container').each(function(){ 
 
     var getUrl = $(".application :selected").val(); 
 
     $('.link_combo').attr("href", getUrl); 
 

 
     $(".application").change(function() { 
 
      console.log(this.value); 
 
      $(".link_combo").attr('href', this.value); 
 
    
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<select class="application selectpicker"> 
 
\t <option value="fileadmin/user_upload/9_downloads/KomPass-Threading_DE.pdf">Deutsch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/KomPass-Threading_GB.pdf">Englisch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/KomPass-Threading_FR.pdf">Französisch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/KomPass-Threading_IT.pdf">Italienisch</option> 
 
</select> 
 
<p><a class="link_combo" href="#" download><i class="icon-file-pdf"></i>Download als PDF</a></p> 
 
</div> 
 

 
<div class="container"> 
 
<select class="application selectpicker"> 
 
\t <option value="fileadmin/user_upload/9_downloads/SECOND_1.pdf">Deutsch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/SECOND_2.pdf">Englisch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/SECOND_3.pdf">Französisch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/SECOND_4.pdf">Italienisch</option> 
 
</select> 
 
<p><a class="link_combo" href="#" download><i class="icon-file-pdf"></i>Download als PDF</a></p> 
 
</div>

來源

2015-09-28 herrsaidy

代碼

$('.link_combo')

會發現所有元素與.link_combo類。在你的代碼中，有兩個這個類的錨元素，所以兩者都改變了。

您需要限制選擇的範圍，因此只能找到相關的鏈接，例如：

$(function() { 
    $('.container').each(function(){ 
     var container = this; 
     var getUrl = $(".application :selected", container).val(); 
     $('.link_combo', container).attr("href", getUrl); 

     $(".application", container).change(function() { 
      console.log(this.value); 
      $(".link_combo", container).attr('href', this.value); 
     }); 
    }); 
});

還有其他的方法和你原來的$(".application").change也被稱爲兩次（我還添加了容器本以上） - 所以你可以移動的事件處理程序出了.each，例如

$(function() { 
    $('.container').each(function(){ 
     var container = this; 
     var getUrl = $(".application :selected").val(); 
     $('.link_combo', container).attr("href", getUrl); 
    }); 

    $(".application").change(function() { 
     console.log(this.value); 
     $(this) 
      .closest(".container") 
      .find(".link_combo") 
      .attr('href', this.value); 
    }); 
});

編輯：添加容器上下文的getURL線

來源

2015-09-28 11:46:13

謝謝。但是當首先加載頁面時，鏈接是相同的。在我選擇一個之後，href的值就是正確的。 – herrsaidy

那麼究竟是什麼問題呢？你說hrefs得到錯誤的值（「第一個Dropdown也改變了第二個HREF的值」），然後他們得到正確的值（「href's有正確的值」）。那麼問題是什麼？ –

你的劇本完美無缺！當我加載網站時，這兩個鏈接的href獲得相同的網址。但那是錯誤的。當我加載頁面或更改下拉腳本應該做同樣的事情。你只是缺少getUrl上的上下文：'var getUrl = $（「。application：selected」，container）.val（）;'http：//www.jsfiddle.net/herrsaidy/vsrkn1k0/1/ – herrsaidy

通過Dropdown更改Href中的網址

回答

相關問題