JS：从下拉菜单中获取值以替换部分 HREF 字符串的问题

Question

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

基本上，如果下拉菜单中 selected <option> 的值是 "handle1"，例如，我想遍历所有与父链接某个 class 的元素，并将 "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 函数仅替换第一个选项 selected 的链接中的文本；之后点击其他人将不会更新 hrefs。因此，如果您最初 select "Person 2"，您会看到链接更新以反映该选项值，但随后选择 "Person 1" 或 "Person 3" 不会对hrefs。我想知道这是否是与使用 this 相关的范围问题？在此感谢您的帮助！

Answer 1

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

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

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

我对你的代码做了 2 处修改。

在 HTML 代码中，将 href 标签内的空格转换为“%20”
在JS代码中，参考"Replacing handle inside 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>

JS：从下拉菜单中获取值以替换部分 HREF 字符串的问题

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

html

javascript

jquery

onchange

href