toggleClass在這裏似乎不適用。任何線索爲什麼？

但是，使用航點庫時，問題似乎與腳本無關，要麼是我們對常規jQuery和JavaScript理解的理解不夠。toggleClass在這裏似乎不適用。任何線索爲什麼？

通過這一行，我們跳轉到選擇屬性href作爲特定值的所有錨點，並添加或移除一個類。

$('a[href="' + $(this).attr('id') + '"]').toggleClass("marca-menu", direction === 'down');

但沒有任何反應。

代碼和下面的小提琴。

JS：

$(document).ready(function() { 
    $('#container section').each(function() {    
    $(this).waypoint(function(direction) { 
     $('a[href="' + $(this).attr('id') + '"]').toggleClass("marca-menu", direction === 'down'); 
    }); 
    }); 
});

HTML：

<nav class="main-menu"> 
<ul> 
<li><a href="#slide3" target="_self">plimplim</a></li> 
<li><a href="#slide4" target="_self">plimplomm</a></li> 
<li><a href="#slide5" target="_self">plimplumm</a></li> 
</ul> 
</nav> 

<section id="slide3"> 
    <h1>bababaadasda</h1> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
</section> 
<section id="slide4"> 
<h1>SLIDE 4</h1> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
</section> 
<section id="slide5"> 
<h1>SLIDE 5</h1> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
    <p>asdsadasdsad</p> 
</section>

CSS： NAV { 顯示：塊; 職位：固定; 寬度：100％; 背景：紅色; }

.marca-menu { 
    background-color: blue; 
}

您可以點擊此處查看：

http://jsfiddle.net/talofo/Bkws7/

我在做什麼錯？

來源

2013-07-26 MEM

剛剛更新的小提琴。抱歉。 – MEM

你不包括航點插件在你的jsfiddle，而不是你應該如何 –

謝謝。再次更新小提琴。 – MEM

沒看到你發佈的HTML，使用：

$('a[href="#' + this.id + '"]').toggleClass("marca-menu", direction === 'down');

來源

2013-07-26 11:17:53

這個技巧。謝謝你發現。我注意到你也使用'this'，而不是'$（this）'...有區別嗎？（如果更方便，我可以按照鏈接進行解釋）。 – MEM

對於屬性ID，因爲它是一個節點元素屬性，所以不需要使用jquery，而是在這裏首選使用元素屬性id。請注意，不能應用於所有屬性，例如this.href將返回絕對路徑，而$（this）.attr（'href'）將返回相對路徑，對於src也是如此 –

toggleClass在這裏似乎不適用。任何線索爲什麼？

回答

相關問題