Question

我的网站上有多个下拉菜单，可通过下拉菜单更改网址。但问题是，第一个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">
	<option value="fileadmin/user_upload/9_downloads/KomPass-Threading_DE.pdf">Deutsch</option>
	<option value="fileadmin/user_upload/9_downloads/KomPass-Threading_GB.pdf">Englisch</option>
	<option value="fileadmin/user_upload/9_downloads/KomPass-Threading_FR.pdf">Französisch</option>
	<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">
	<option value="fileadmin/user_upload/9_downloads/SECOND_1.pdf">Deutsch</option>
	<option value="fileadmin/user_upload/9_downloads/SECOND_2.pdf">Englisch</option>
	<option value="fileadmin/user_upload/9_downloads/SECOND_3.pdf">Französisch</option>
	<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>

Answer 1

代码

$('.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行

使用下拉列表更改Href中的网址

1 个答案: