禁用与 JQuery 的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/586024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling links with JQuery
提问by dswatik
I have the following code which does a function similar to the way the comment link works here on Stackoverflow... when clicked it triggers a ActionResult and populates a div
我有以下代码，它执行的功能类似于 Stackoverflow 上评论链接的工作方式...单击时，它会触发 ActionResult 并填充 div
$(function() {
$("a[id ^='doneLink-']").live('click', function(event) {
match = this.id.match(/doneLink-(\d+)/);
container = $("div#doneContainer-" + match[1])
container.toggle();
if (container.is(":visible")) {
container.load($(this).attr("href"));
} else {
container.html("Loading...");
}
event.preventDefault();
});
});
I want to be able to do one things change the link text that of which they clicked on to say something like "Hide" and also disable other links in the little menu that this link resides.
我希望能够做一件事，更改他们单击的链接文本以说出“隐藏”之类的内容，并禁用此链接所在的小菜单中的其他链接。
Edit:The source to go with this function looks like this
编辑：使用此功能的源代码如下所示
<div id="dc_lifelistmenu"style="float:left;padding-bottom:5px;font-size:10pt;width:400px;">
<a href="/entries/addentry/86">Add Entry</a> |
<a href="/goals/adddaimoku/86" id="daimokuLink-2">Log Daimoku</a> |
<a href="/goals/done/86" id="doneLink-2">Mark Completed</a> |
<a href="/goals/remove/86">Remove</a>
</div><br />
<div id='daimokuContainer-2' style="display:none;"> Loading...</div>
<div id='doneContainer-2' style="display:none;"> Loading...</div>
采纳答案by alphadogg
To modify the link's text inside your function, simply use:
要修改函数内的链接文本，只需使用：
this.text('New Text!');
To disable other text, we'd have to see the source of the page. I'm not sure what you mean by "other links"...
要禁用其他文本，我们必须查看页面的来源。我不确定您所说的“其他链接”是什么意思...
UPDATE: Based on your edit, then I guess what you want:
更新：根据你的编辑，我猜你想要什么：
$(function() {
$("a[id ^='doneLink-']").live('click', function(event) {
match = this.id.match(/doneLink-(\d+)/);
container = $("div#doneContainer-" + match[1])
container.toggle();
if (container.is(":visible")) {
container.load($(this).attr("href"));
} else {
container.html("Loading...");
}
event.preventDefault();
// added
this.text('Hide');
// disable others manually, repeat and adjust for each link
$("#daimokuLink-" + match[1]).toggle();
// or in one shot, all but the one I clicked
$("#dc_lifelistmenu:not(#doneContainer-" + match[1] + ")").toggle();
});
});
UPDATE 2: Saw your comment. To disable a link instead of hiding it, then disable the onclickby overriding it, instead of using toggle().
更新2：看到你的评论。要禁用链接而不是隐藏它，请onclick通过覆盖它来禁用，而不是使用toggle().
$("#daimokuLink-" + match[1]).click(function() { return false; });
回答by Will
If you want to remove the link instead of disabling it:
如果您想删除链接而不是禁用它：
jQuery('#path .to .your a').each(function(){
var $t = jQuery(this);
$t.after($t.text());
$t.remove();
});
Notes:
笔记：
回答by kkubasik
There are a few ways to approach this, probably the easiest is to just do something like: $('a').filter('not:#doneLink').hide(); to hide all links that are not the one you have specified above.
有几种方法可以解决这个问题，可能最简单的方法是执行以下操作： $('a').filter('not:#doneLink').hide(); 隐藏所有不是您在上面指定的链接。
Check out this page for more on jQuery selectors:
查看此页面以了解有关 jQuery 选择器的更多信息：
回答by roman
The simplest way to disable anchor is the usage of disabled-attribute, but problem is the given attribute is supported only by IE. It will not work in FireFox, for example. If you want your code to work in different browsers, you can try to save the values of href and onclick attributes into other custom attributes, then to set href="#"and onclick="return false;". Enabling back you should restore saved values of href and onclick. For visual effect you can use applying specila css-class. I described this approach in my blog - Disable hyperlink
禁用锚点的最简单方法是使用 disabled-attribute，但问题是给定的属性仅被 IE 支持。例如，它在 FireFox 中不起作用。如果你想让你的代码在不同的浏览器中工作，你可以尝试将 href 和 onclick 属性的值保存到其他自定义属性中，然后设置href="#"和onclick="return false;". 启用后，您应该恢复保存的 href 和 onclick 值。对于视觉效果，您可以使用应用特殊的 css-class。我在我的博客中描述了这种方法 -禁用超链接
