jquery - 使用 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/

检查控制台记录的操作。

这个想法是缓存需要更改 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

});

脚注:不过更改 id 并不是一个好主意。另外，请确保您的“newId”不与任何其他元素冲突。