我正在尝试使用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>