使用 jquery 禁用和启用链接答案

【问题标题】：Disabling and enabling links using jquery使用 jquery 禁用和启用链接
【发布时间】：2014-09-18 01:08:55
【问题描述】：

（禁用是指删除链接而不删除其内容，然后启用 - 以检索链接）

我已经阅读了有关 wrap 和 replacewith、bind 和 unbind 的内容。但我似乎无法让它工作。基本上我有一个按钮，我单击它来禁用/启用链接。这是我到目前为止工作的代码：

var edit = false;
$('.courselink').click(function(e){ //the links
if(edit == true){
    return false;
}
});

$('.vieweditlink').click(function(){ //This is the button

    if($(this).html() == 'Edit'){
        $(this).html('View');
        edit = true;
    }
    else {
        $(this).html('Edit');
        edit = false;
     }
 });

当然，一切都在$(document).ready 中

这里是 JSfiddle：http://jsfiddle.net/ugkc8gsd/7/

【问题讨论】：

显示和隐藏它们，不要禁用它们。您似乎无法禁用它们的原因是因为这不是链接应该做的。
@CBauer 谢谢，但请赐教。我要怎么做？呵呵
告诉我你想要达到的具体目标，因为我不明白你到底想要什么。也许创建一个 jsfiddle。
e.preventDefault 将停止链接运行，因此您只需将 return false 更改为 e.preventDefault()
@BenPotter 我已经尝试过了。它没有工作

标签： javascript jquery

【解决方案1】：

仍然不太确定您到底想要达到什么目的，但要隐藏链接，您只需隐藏它们即可。 http://jsfiddle.net/ugkc8gsd/8/

在点击事件按钮中隐藏它们

$('.vieweditlink').click(function () 
{
    $('.courselink').hide();
});

编辑：哦，我看到你编辑了你的帖子。
那么这是一个新的 jsfiddle
http://jsfiddle.net/ugkc8gsd/10/
希望对你有帮助

编辑 2 ：这是新承诺的 jsfiddle。
http://jsfiddle.net/ugkc8gsd/12/
希望这是你想要的。

【讨论】：

不。我不想隐藏整个链接。链接内的内容应该保留。
应该保留链接内的内容是什么意思？ html 还是一样的，只是不可见
我的意思是“一些内容”应该仍然可见。唯一的区别是“某些内容”不应充当链接。结果应该是 this OMG 对不起，如果我没有让自己清楚:(
哦，我想我得到了你想要的。链接应该可以正常工作。当您单击“编辑”按钮时，“somecontent”文本应该仍然可见，但点击不应该工作。像这样？
是的！确切地！谢谢

【解决方案2】：

让链接在被禁用时不可见...

http://jsfiddle.net/6q7dr9fq/3/

$('.courselink').click(function(e){ //the links
    $('.courselink:hidden').show();

    $(this).hide();
});

【讨论】：

【解决方案3】：

没有人感兴趣，但这是我解决问题的方法：

var edit = false;
var links = $('.courselink').toArray(); //this gets the links but not the whole elements


$('.vieweditlink').click(function(){

if($(this).html() == 'Edit'){
    $(this).html('View');
    edit = true;

    $('.courselink').each(function(i) {
        $(this).replaceWith("<div class='courselink'>"+$(this).html()+"</div>");
    });
}
else {
    $(this).html('Edit');
    edit = false;

    $('.courselink').each(function(i) {
        $(this).replaceWith("<a class='courselink' href='"+links[i]+"'>"+$(this).html()+"</a>");
    });
}
});

如果有人知道更好的解决方案，请随时分享！谢谢！

JSFiddle：http://jsfiddle.net/13tudb3p/

【讨论】：

哦，我得到了你想要的。你应该说你不想让他们再做主播了。无论如何，这个解决方案似乎对你有用。虽然你的 if 有点奇怪，因为你没有使用你在开始时声明的编辑变量。你做了文本的替换，使它有点加倍。您也可以只创建新的 div 或锚点而不是替换，但我不知道什么对您的项目更好。很好，你找到了解决方案。下次描述得好一点;)
@VRC 嗨！刚看到你的评论。是的，它有点让它翻倍，但没关系。我只需要调整我的 CSS 让它看起来一样 :) 而且我不必删除锚点，真的，但你给我的解决方案没有奏效，所以.. 呵呵，不过还是谢谢！