使用jQuery動態更改鏈接

是否可以檢查li是否具有特定的類，然後更改屬性。使用jQuery動態更改鏈接

<ol class="carousel-indicators"> 
    <li class="active" data-slide-to="0" data-target="#carousel"></li> 
    <li data-slide-to="1" data-target="#carousel"></li> 
    <li data-slide-to="2" data-target="#carousel"></li> 
</ol>

當顯示li時，將添加class=active，如下例所示。

<li data-slide-to="2" data-target="#carousel" class="active"></li>

我想定位這個類，然後動態地改變它。

$("#carousel-link").attr("href", "http://www.w3schools.com/jquery");

例如，如果如果li data-slide-to="1"是actve欲通過使用$("#carousel-link").attr("href", "http://www.w3schools.com/jquery");

例如動態地改變鏈接，如果如果li data-slide-to="2"是actve欲通過使用$("#carousel-link").attr("href", "http://www.w3schools.com/php");

來源

2016-05-16 Martin

請發佈JS代碼以便能夠運行代碼並重現問題 –

可以請您將代碼添加到jsfiddle中嗎？ –

@HarshSanghani http://jsfiddle.net/d55t7hfa/ – Martin

在動態地改變鏈接您的HTML代碼您有一個結束標記

</section>

但沒有

<section>

它之前。確保這是固定的，看看問題是否存在。

來源

2016-05-16 09:50:25 niandrei

我已更改我的代碼以提供更好的示例。感謝您的回答。 – Martin

如果我理解正確，我不認爲你想查找哪個幻燈片是活動的。你實際上想要綁定到旋轉木馬的事件。

Bootstrap Carousel Events

引導旋轉木馬類暴露了鉤入旋轉木馬功能的兩個事件。

這兩個事件具有以下附加性能：

方向：其中轉盤被滑動（或者「左」或「右」）的方向。

relatedTarget：作爲活動項目滑入到位的DOM元素。

所有輪播事件在轉盤本身發射（即，在< DIV 類=「轉盤」 >）。

slide.bs.carousel此事件在調用幻燈片實例方法時立即觸發。

sliding.bs.carousel當傳送帶完成其滑動轉換時，將觸發此事件。

你可能會希望使用「幻燈片」事件，然後處理回調函數中的變化。

$('#carousel').on('slide.bs.carousel', function() { 
    // handle update here 
})

有一件事讓我迷惑了你的代碼。您是否需要更新「href」值，還是隻需在幻燈片製作完成後設置它？如果您在幻燈片更改時動態確定「href」，上述解決方案非常棒。但是，如果您知道頁面加載時的價值，那麼設置它會容易得多。

編輯：更新目標幻燈片中的「href」

根據您的結構，你可以更新這樣即將到來的幻燈片的「href」：

$('#carousel').on('slide.bs.carousel', function (event) { 
    $(event.relatedTarget).find('a').attr('href', 'your-new-url'); 
})

來源

2016-05-16 15:08:02 WonderGrub

我試圖設置幻燈片時，但href永遠不會改變。我認爲這是由於我已經實施的CSS。您的上述解決方案應該爲我做的伎倆，但我不確定如果我改變鏈接，如果它是在一個特定的幻燈片。 – Martin

我已經用示例更新了我的答案。希望有所幫助。 – WonderGrub

使用jQuery動態更改鏈接

回答

相關問題