更新選擇列表以匹配URL上的主題標籤更改

我正在爲具有預覽多個圖像的商店的產品頁面工作。截至目前，正在查看的當前圖片更新了URL上的＃標籤。我有一個選擇列表，每個選項都標有匹配每個潛在哈希標籤的類。更新選擇列表以匹配URL上的主題標籤更改

我得到了一個開始，但只是不太清楚如何使用jQuery獲取hashtag，將其與類匹配並執行某些操作。觸發點擊或僅更新選項以「選擇」會更好嗎？

這是我的開始，不太清楚爲什麼它不起作用。

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

來源

2017-09-15 Robert E

請張貼的HTML/JS你迄今或者任何的jsfiddle試過嗎？ –

使用url.substring（url.indexOf（'＃'）+ 1）;得到沒有＃ – Liquidchrome

的字符串我只是添加了JS小提琴。希望能夠在你點擊帶有hashtag的鏈接的地方使用它，並更新選項以反映這一點。 https://jsfiddle.net/ykmgzyc7/ –

既然你不實際加載一個新的頁面，只是使用錨你可以d用jquery動態修改選擇。

HTML：

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

的Jquery：

$("a").on("click",function(){ 
var link=$(this).attr('href'); 
var hash = link.substring(link.indexOf('#')+1); 
$('#selectOptions option').removeAttr('selected'); 
$('#selectOptions .'+hash).attr('selected',true); 
});

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

來源

2017-09-15 16:06:33 Liquidchrome

這是如此接近。點擊列表後，我發現它會停止響應。有任何想法嗎？ –

我編輯添加一個清除之前做出選擇 – Liquidchrome

謝謝。這很好，我感謝你的幫助！ –

可以使用獲得哈希：

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

這得到哈希，轉換字符的陣列中，刪除最前一頁字符（＃）並再次轉換爲字符串。然後你需要爲哈希改變事件，在這裏你將新值賦予一個事件處理程序：

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

你的HTML必須addapted到這樣的事情，每個選擇項設定值：

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

來源

2017-09-15 16:02:33 colxi

謝謝。我現在有一個JSFiddle。 https://jsfiddle.net/ykmgzyc7/點擊任何鏈接應該適當地更新選擇列表。 –

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

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

來源

2017-09-15 16:05:28

我將它添加到我的JSFiddle，它似乎並沒有工作。 https://jsfiddle.net/ykmgzyc7/2/ –

更新選擇列表以匹配URL上的主題標籤更改

回答

相關問題