Question

我有一个带有几个导航链接的导航。我必须为导航链接指定 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

});

脚注：改变ID并不是一个好主意。另外，请确保您的＆＃34; newId ＆＃34;与任何其他元素都不冲突。

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

即可

使用jQuery切换或添加和删除元素的ID

3 个答案: