javascript - JS : Issue getting values from drop-down menu to replace parts of HREF strings

Question

我正在尝试使用 jQuery 获取下拉菜单中所选项目的值，并使用该值替换其 href 中包含该字符串的所有 anchor 链接的特定部分。值(value)。我设置了一个 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”，您会看到链接更新以反射(reflect)该选项值，但随后选择“Person 1”或“Person 3”不会对 href 产生任何影响。我想知道这是否是与使用 this 有关的范围问题？感谢您在这里提供的任何帮助!

Answer 1

当您第一次更改选择下拉列表中的句柄时，href 中的“SelectedHandle”字符串将被替换为“handle1”或“handle2”等字符串。

因此，当您第二次或第三次更改 select 下拉列表中的 handle 时，href 中将不会有“SelectedHandle”字符串被替换。因此 href 不会改变。

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

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

1. 在 HTML 代码中，使用“%20”转换 href 标签内的空格
2. 在JS代码中，引用“Replacing handle inside href” block ；

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

$(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>