我正在尝试使用jQuery在下拉菜单中获取所选项目的值,并使用该值替换所有在其href值中包含该字符串的锚链接的特定部分。我已经设置了CodePen here,并且还在下面包含了相关的标记和JS。

基本上,例如,如果下拉菜单中选定的<option>的值为“ handle1”,我想遍历具有某个类的父元素的所有链接,并替换“ SelectedHandle”占位符文本具有该值。



$(document).ready(function() {
  // define vars
  var dropDown = $("#choices"),
    grid = $('.row-grid');

  // get value (handle) of selected item
  dropDown.on('change', function() {

    var handle = $(this).val();
    var links = $('.animate-this a');

    links.each(function() {
      this.href = this.href.replace('SelectedHandle', handle);
    });

    // show divs upon making a selection
    if (handle !== 0) {
      grid.removeClass('hide-by-default');
    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- EXAMPLE SELECT OPTIONS BELOW -->
<select id="choices">
  <option value="0" selected disabled hidden>Choose Below</option>
  <option value="handle1">Person 1</option>
  <option value="handle2">Person 2</option>
  <option value="handle3">Person 3</option>
</select>

<!-- EXAMPLE DIVS BELOW -->
<div class="row row-grid hide-by-default">
  <div class="col-6 col-sm-4 col-md-3">
    <div data-animate-hover="2">
      <div class="animate-this">
        <a href="https://twitter.com/home?status=Hey %40SelectedHandle Message 1" target="_blank"><img src="https://via.placeholder.com/160x80" class="img-fluid rounded shadow">
        </a>
      </div>
    </div>
  </div>

  <div class="col-6 col-sm-4 col-md-3">
    <div data-animate-hover="2">
      <div class="animate-this">
        <a href="https://twitter.com/home?status=Hey %40SelectedHandle Message 2" target="_blank"><img src="https://via.placeholder.com/160x80" class="img-fluid rounded shadow">
        </a>
      </div>
    </div>
  </div>
</div>





我的问题是change函数仅替换所选第一个选项的链接中的文本;之后再点击其他人将不会更新hrefs。因此,如果最初选择“ Person 2”,则会看到链接更新以反映该选项值,但是随后选择“ Person 1”或“ Person 3”对href不会产生任何影响。我想知道这是否是与this的使用有关的范围问题?感谢您的协助!

最佳答案

首次更改选择下拉列表中的句柄时,href中的“ SelectedHandle”字符串将被“ handle1”或“ handle2”之类的字符串替换。

因此,当您第二次或第三次更改选择下拉菜单中的句柄时,在href中将没有字符串“ SelectedHandle”被替换。
因此href不会改变。

我建议对URL(href标记)中的空格进行编码,因为某些浏览器会将URL中的空格转换为“%20”,而其他浏览器会将其转换为“ +”。
因此,将href标记内的空格替换为“%20”;

我对您的代码进行了2次更改。


在HTML代码中,href标记内带有“%20”的已转换空格
在JS代码中,请参见“在href内替换句柄”;


尝试(运行)以下代码段。
我相信它会按您的预期工作。



$(document).ready(function() {
  // define vars
  var dropDown = $("#choices"),
    grid = $('.row-grid');

  // get value (handle) of selected item
  dropDown.on('change', function() {

    var handle = $(this).val();
    var links = $('.animate-this a');

    //Replacing handle inside href
    links.each(function() {
      $trim_beginning = (this.href).substr(
        (this.href).indexOf("%40") + 3
      );

      $trim_ending = $trim_beginning.substr(
        0, $trim_beginning.indexOf("%20")
      );

      $replace_string = $trim_ending;
      this.href = this.href.replace($replace_string, handle);
    });

    // show divs upon making a selection
    if (handle !== 0) {
      grid.removeClass('hide-by-default');
    }

  });
});

div,
img {
  display: block;
  padding: 0;
  margin: 0;
}

select {
  margin-bottom: 25px;
}

.hide-by-default {
  display: none;
}

.col-6 {
  margin-bottom: 25px;
}

<!--JQUERY CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- EXAMPLE SELECT OPTIONS BELOW -->
<select id="choices">
  <option value="0" selected disabled hidden>Choose Below</option>
  <option value="handle1">Person 1</option>
  <option value="handle2">Person 2</option>
  <option value="handle3">Person 3</option>
</select>

<!-- EXAMPLE DIVS BELOW -->
<div class="row row-grid hide-by-default">
  <div class="col-6 col-sm-4 col-md-3">
    <div data-animate-hover="2">
      <div class="animate-this">
        <a href="https://twitter.com/home?status=Hey%20%40SelectedHandle Message%201" target="_blank"><img src="https://via.placeholder.com/160x80" class="img-fluid rounded shadow">
        </a>
      </div>
    </div>
  </div>

  <div class="col-6 col-sm-4 col-md-3">
    <div data-animate-hover="2">
      <div class="animate-this">
        <a href="https://twitter.com/home?status=Hey%20%40SelectedHandle%20Message%202" target="_blank"><img src="https://via.placeholder.com/160x80" class="img-fluid rounded shadow">
        </a>
      </div>
    </div>
  </div>
</div>

10-07 19:53
查看更多