我正在尝试使用 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
有关的范围问题?感谢您在这里提供的任何帮助!
最佳答案
当您第一次更改选择下拉列表中的句柄时,href 中的“SelectedHandle”字符串将被替换为“handle1”或“handle2”等字符串。
因此,当您第二次或第三次更改 select 下拉列表中的 handle 时,href 中将不会有“SelectedHandle”字符串被替换。 因此 href 不会改变。
我建议对 URL(href 标签)内的空格进行编码,因为某些浏览器会将 URL 中的空格转换为“%20”,而其他浏览器会将其转换为“+”。 因此,将 href 标签内的空格替换为“%20”;
我对您的代码进行了 2 处更改。
- 在 HTML 代码中,使用“%20”转换 href 标签内的空格
- 在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>
关于javascript - JS : Issue getting values from drop-down menu to replace parts of HREF strings,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56696759/