用jQuery點擊或添加和刪除元素的ID

Question

我有一個帶有幾個導航鏈接的導航。我必須爲導航鏈接分配一個ID以使用特定的腳本。不幸的是我不能在腳本中使用類。

爲該元素設置新的ID工作正常，腳本拿起事件並完成其工作。點擊頁面上的其他鏈接或其他導航鏈接後，將原始ID恢復到導航鏈接也可以使用，但我不確定這是否正確。

我的代碼似乎只給點擊的時間（什麼是可取的）給新元素的ID然而我想知道如何可以切換或添加和刪除新的ID，只有一次我點擊任何其他鏈接（包括導航鏈接）。不知道是否僅在點擊時使用元素上的新ID是件好事。

https://stackoverflow.com/questions/11489037/add-and-remove-attribute-with-jquery/11489050#11489050

和

https://stackoverflow.com/questions/7077673/add-and-remove-class-on-click/7077753#7077753

和

https://stackoverflow.com/questions/15418219/add-an-id-to-clicked-links-but-remove-it-from-others/15418623#15418623 非常接近我想要實現但這些問題不是支持類或單獨的按鈕。

HTML

<nav> 
    <ul> 
     <li><a class="navlink" id="Work" href="#Work">Work</a></li> 
     <li><a class="navlink" id="Portfolio" href="#Portfolio">Portfolio</a></li> 
     <li><a class="navlink" id="Print" href="#Print">Print</a></li> 
     <li><a class="navlink" id="Services" href="#Services">Services</a></li> 
     <li><a class="navlink" id="Contact" href="#Contact">Contact</a></li> 
    </ul> 
</nav> 

jQuery的

 // bind event handler to element/s 
     $('.navlink').stop(true).click(function (e) { 

      // prevent default action 
      e.preventDefault(); 

      // get the id of the clicked element 
      var currentId = $(this).attr('id'); 

      // show alert with the id of the clicked element 
      alert("The current ID of the clicked element is "+ currentId +" "); 

      // change id of the element to newId 
      {this.id = "newId";} 

      // run script on clicked element 
      $(this).scrolld(); 

      // give element back its original id it had before click 
      // not sure if this is ok 
      // it does work but I think there is better or more elegant ways 
      {this.id = currentId;} 

      // instead of {this.id = currentId;} I am trying to do something like this 
      // but it does not seem to work 
      // I would like the new id to stay with the element until any other link 
      // on the page is clicked and not only for the duration of the click 
       $('.navlink').click(function(){ 
        $('.navlink').removeAttr("id") 
        $(this).attr("id", currentId); 
       }); 
     }); 

什麼是正確的做法會這樣的代碼，真正的元素被賦予新的ID一次點擊，還給其原一旦頁面上的任何其他元素被點擊一次的ID？

我不確定是否在點擊時使元素上的新ID以正確的方式完成，或者至少可以接受。

它的工作原理，但我不確定，似乎太簡單了，如果你能幫助我想出一個更好或更穩固的方式，請提前分享你的想法和感謝。

問候

Answer 1

您正在尋找這樣的事情：

演示：http://jsfiddle.net/abhitalks/5JuBe/2/

檢查console用於記錄的動作。

這個想法是緩存您需要更改ID的活動鏈接。點擊另一個鏈接後還原原始緩存的ID。

var $prevLink = null, prevId = null; 
$('.navlink').stop(true).click(function (e) { 

    if (prevId) { 
     // restore current link and id if not previously cached 
     $prevLink.attr('id', prevId); 
     console.log($prevLink.text() + ' restored to ' + $prevLink.attr('id')); 
    } 

    // cache current link and id 
    $prevLink = $(this); 
    prevId = this.id; 

    console.log($(this).text() + ' cached with ' + prevId); 

    // change id of the element to newId 
    this.id = "newId"; 

    console.log($(this).text() + ' changed to ' + this.id); 

    // carry out your operation on this link here 

}); 

腳註：更改IDS是不是雖然一個非常好的主意。另外，請確保您的「newId」不與任何其他元素衝突。

Answer 2

我不是很確定你想要達到什麼樣的，但如果你想改變元素的id，當它被點擊，並返回到以前的值之後，你可以做到這一點的方法：

$(function() { 
    // When the page loads, reset all 
    resetIds(); 

    $(".navlink").on("click", function (e) { 
     e.preventDefault(); 

     // When one is clicked, reset all before changing the clicked 
     // one   
     resetIds(); 

     $(this).attr("id", "newId"); 
    }); 
}); 

function resetIds() { 
    $(".navlink").each(function() { 
     // For each link, set its id = its data-id 
     $(this).attr("id", $(this).data("id")); 
    }); 
} 

但要工作，你需要稍微改變您的標記，添加data-id屬性：

<nav> 
    <ul> 
     <li><a class="navlink" data-id="Work" href="#Work">Work</a> 

     </li> 
     <li><a class="navlink" data-id="Portfolio" href="#Portfolio">Portfolio</a> 

     </li> 
     <li><a class="navlink" data-id="Print" href="#Print">Print</a> 

     </li> 
     <li><a class="navlink" data-id="Services" href="#Services">Services</a> 

     </li> 
     <li><a class="navlink" data-id="Contact" href="#Contact">Contact</a> 

     </li> 
    </ul> 
</nav> 

演示：http://jsfiddle.net/RE4Uv/

Answer 3

如果你的id總是和你的href一樣，你也可以用它作爲標識符。

$(".navlink").click(function(){ 
    $(this).attr("id","newId"); 
    normalID = $(this).parent().siblings().children().attr("href"); 
    $(this).parent().siblings().children().each(function(){ 
     var identifier = ($(this).attr("href").replace('#','')); 
     $(this).attr("id",identifier); 
    }); 
}); 

http://jsfiddle.net/8Xyrv/2/

只要改變newId的ID你想