Question

我正在为商店的产品页面工作，能够预览多张图片。截至目前，正在查看的当前图像更新了URL上的#hashtag。我有一个选择列表，每个选项都标有一个匹配每个潜在主题标签的类。

我有一个开始，但只是不太确定如何使用jQuery来获取主题标签，将其与类匹配并执行某些操作。触发点击或只是将选项更新为“已选择”会更好吗？

这是我的开始，不太确定为什么它不起作用。

var url = window.location.href;
var hash = url.substring(url.indexOf('#'));                          
$('option.' + hash).trigger('click');

Answer 1

由于您实际上并未加载新页面而只是使用锚点，因此您可以使用jquery动态修改选择。

HTML：

import re

question = input('What do you want to do?')
currency_to_convert =  re.findall('What is (\S*)', question, re.S)
print (*currency_to_convert)

Jquery的：

<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>

<select id="selectOptions">
<option class="one">One</option>
<option class="two">Two</option>
<option class="three">Three</option>
</select>

https://jsfiddle.net/ykmgzyc7/3/

Answer 2

您可以使用以下方式获取哈希：

(window.location.hash).split("").slice(1).join("")

这将获取哈希值，在字符数组中转换，删除fisrt char（＃）并再次转换为String。然后，您需要一个Hash更改事件的事件处理程序，您可以在其中分配新值：

window.onhashchange = function(){
    var value = (window.location.hash).split("").slice(1).join(""); 
    $('#your_select_id').val( value );
};

您的HTML需要添加到这样的内容中，为每个SELECT项设置值：

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<select id="your_select_id">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

Answer 3

var url = window.location.href;
console.log(url);
var hash = url.substring(url.indexOf('#') + 1)
console.log(hash);
$('option.' + hash).trigger('click');

更新选择列表以匹配URL上的标签更改

3 个答案: