jQuery檢測文檔是否包含與鏈接的href匹配的標識

我已經編寫了一個將hrefs添加到字母導航欄的函數。我做到了，所以每個字母部分都給自己一個ID。我想在沒有例如「C」部分的情況下這樣做，我可以向鏈接到#c的鏈接添加一個類，以禁用它。這是我到目前爲止：jQuery檢測文檔是否包含與鏈接的href匹配的標識

<ul class="no-bullet inline"> 
     <li><a class="scroller"><strong>A</strong></a></li> 
     <li><a class="scroller"><strong>B</strong></a></li> 
     <li><a class="scroller"><strong>C</strong></a></li> 
</ul> 

    <div class="space-above space-below letter-section"> 
     <h4 class="alpha-heading"><strong>A</strong></h4> 
     <ul class="no-bullet"> 
      <li><a class="naming" href="#">Benny Goodman</a></li> 
      <li><a class="naming" href="#">Benny Goodman</a></li> 
      <li><a class="naming" href="#">Benny Goodman</a></li> 
     </ul> 
    </div> 
<div class="space-above space-below letter-section"> 
     <h4 class="alpha-heading"><strong>A</strong></h4> 
     <ul class="no-bullet"> 
      <li><a class="naming" href="#">Benny Goodman</a></li> 
      <li><a class="naming" href="#">Benny Goodman</a></li> 
      <li><a class="naming" href="#">Benny Goodman</a></li> 
     </ul> 
    </div> 
<script> 
function alphaLink() { 
     var alphaLink = $(this); 
     var alphaLinkRef = "#" + alphaLink.text().toLowerCase(); 
     $(alphaLink).attr("href", alphaLinkRef); 
    }; 
    $('.scroller').each(alphaLink); 

    //assigns each content section an ID 

    function alphaID() { 
     var section = $(this); 
     var sectionID = section.text().toLowerCase(); 
     $(section).attr("ID", sectionID); 
    }; 
    $('.alpha-heading').each(alphaID); 

linkMatch function(){ 
    var link = $(this); 
    if(link.length <= 0) { 
    $(this).addclass("disabled"); 
} 

$("scroller").each(linkMatch); 
</script>

來源

2017-07-20 stolercloud

什麼是你的問題？它不起作用嗎？ –

我無法通過搜索ID來正常工作。 – stolercloud

我拿走了耶利米的代碼，稍微修改了一下，做了我需要的事情。非常感謝所有的答案 - 這裏是最終產品：

function findID(ID) { 
    var exists = false; 
    if ($(ID).length > 0) { 
     exists = true; 
    } 
    return exists; 
} 

function matchLink() { 
    var href = $(this).attr('href'); 
    if (!findID(href)) { 
     // Doesn't exist 
     $(this).addClass('alpha-disabled'); 
    } 
}; 
$('.scroller').each(matchLink);

來源

2017-07-20 18:50:31 stolercloud

您應該將我的答案標記爲可接受以幫助我的聲譽！很高興它幫助。有一件事要注意，你可能已經考慮過了，如果你傳遞一個沒有前導＃的findID字符串，它將不起作用。你可以添加一些邏輯來檢查＃，如果它不存在，添加它。 –

你可以這樣做。這裏有一個例子：

function linkMatch(index, elem){ 
    var link = elem, 
     heading = $(".alpha-heading"); 

    var linkHref = link.attr("href").substring(1, link.attr("href").length); 

    if(typeof(heading[index]) != "undefined") { 
     if(linkHref != heading[index].getAttribute("id")) { 
      link.addClass("disabled"); 
     } 
    } 
} 

$(".scroller").each(function(index) { 
    linkMatch(index, $(this)); 
});

編輯我剛剛編輯我的代碼，因爲我忘了寫length內linkHref變量

來源

2017-07-20 17:34:37 riverside256

這段代碼中有幾個錯誤 - 一旦我修復了語法錯誤，這幾乎可以奏效。但是，它將禁用的類添加到所有鏈接，而不僅僅是沒有任何鏈接的鏈接。 – stolercloud

你的意思是？ – stolercloud

function linkMatch（index，elem）var link = elem; var heading = $（「。alpha-heading」）;鏈接地址（「href」）。如果（typeof（heading [index]）！=「undefined」）{ if（linkHref！= heading [index] .getAttribute（「id」））{link.addClass（「disabled」）; 。 } } } $（「卷軸」）每個（函數（指數）{ linkMatch（指數，$（本））; }）; 因爲這幾乎可以工作 - 但是，它增加了禁用所有功能。（「href」）後面的「 – stolercloud

如果HREF是一樣的東西「#C」，取看看這個：

$(document).ready(function(){ 
    $('a').each(function(i,e){ 
    var href = $(this).attr('href') 
    if(!findID(href)){ 
     // Doesn't exist 
     $(this).addClass('disabled'); 
    } 
    }) 
    function findID(ID){ 
    var exists = false; 
    if($(ID).length > 0){ 
     exists = true; 
    } 
    return exists; 
    } 
})

希望這有助於！

已更新！對不起，我忽略了你想禁用鏈接，而不是點擊。 Here is a JsFiddle如果你用href =「$ find-someting-else」來檢查鏈接，你會發現它的類禁用了，而另一個則沒有。

來源

2017-07-20 17:51:40

我需要這個來禁用頁面加載時的鏈接而不是點擊。 – stolercloud

已更新，應該這樣做 –

jQuery檢測文檔是否包含與鏈接的href匹配的標識

回答

相關問題