使用 jQuery 切换 href/attribute 值答案

【问题标题】：Toggle href/attribute value using jQuery使用 jQuery 切换 href/attribute 值
【发布时间】：2013-06-07 09:37:56
【问题描述】：

我试图在点击时切换元素的 href 值。这是我目前所拥有的：

$('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').click(function(e) {
    $(this).attr('href',$(this).attr('href') == '#wwd-extra-content' ? '#wwd-section' : '#wwd-extra-content');
});

还有我的 HTML：

<a class="smooth-scroll wwd-extra-content-trigger" href="#wwd-extra-content"><span></span></a>

但它似乎没有在点击时更新。

非常感谢您的帮助。

【问题讨论】：

您的代码看起来不错。你能创建一个显示问题的 jsFiddle 吗？
似乎没有更新 href？ jsfiddle.net/MHezU
在我更改选择器时创建的小提琴中工作正常，因为您的示例没有 .wwd-content-container .wwd-content-each 的祖先。 jsfiddle.net/j08691/MHezU/1。您的实际代码中的链接是否具有这些类的祖先？
我刚刚更新了我的答案。在附加点击处理程序之前，您是否确保 DOM 已加载？

标签： jquery toggle href attr

【解决方案1】：

您是否确保在附加点击事件处理程序之前加载了 DOM？

$(function(){
    $('.wwd-content-container .wwd-content-each .wwd-extra-content-trigger').click(function(e) {
        $(this).attr('href',$(this).attr('href') == '#wwd-extra-content' ? '#wwd-section' : '#wwd-extra-content');
    });
});

【讨论】：

是的，但要么缓存把所有东西都扔掉了；要么或者它只是突然起作用了。尽管如此，感谢您的帮助！ :)

【解决方案2】：

来自您的代码

只需使用.wwd-extra-content-trigger

$('.wwd-extra-content-trigger').click(function(e) { $(this).attr('href',$(this).attr('href') == '#wwd-extra-content' ? '#wwd-section' : '#wwd-extra-content'); });

【讨论】：

为什么，OP 发布的层次结构有什么问题？也许他需要特定的选择器链。

【解决方案3】：

$('.wwd-extra-content-trigger').click(function(e) {
    $(this).attr('href',$(this).attr('href') == '#link1' ? '#link2' : '#link1');
});

【讨论】：

【解决方案4】：

编辑

最初误读了 OPs 代码。我没有注意到你的班级之间有空格。

尝试将您的 JavaScript 更改为：

$('.wwd-content-container, .wwd-content-each, .wwd-extra-content-trigger').click(function(e) {
    $(this).attr('href', $(this).attr('href') == '#wwd-extra-content' ? '#wwd-section' : '#wwd-extra-content');
});

jsFiddle Example

【讨论】：

You're selecting objects with ALL of the following classes... 这完全不真实。
如果类名之间没有空格，那就是真的。但由于有空格，它正在寻找后代。