javascript - JQuery 显示/隐藏链接

Question

这就是我的困境。一直在处理这个 Jquery 极端代码，我需要帮助来判断某个链接是否显示。这是我的。

开关:

<a href="#" id="visbilitybutton" class="button" title="Visible"><span class="icon icon84"></span></a>

<a href="#" id="visbilitybutton" class="button" title="Invisible"><span class="icon icon85"></span></a>

(注意唯一不同的是图标编号)当有人单击 #visbilitybutton 时，这些需要来回切换。不确定执行此操作以及捕获所选内容的最佳方法。

我目前拥有的唯一代码使切换单向前进，但再次点击时不会返回。

 $(document).ready(function () { 
    $('#visbilitybutton').click(function() {
         $(this).replaceWith('<a href="#" id="visbilitybutton" class="button" title="Invisible"><span class="icon icon85"></span></a>');
    }); 
    });

Answer 1

首先，您的页面上不应有多个相同的 id 属性。使 visibilitybutton 成为一个类。

无论如何，您可以使用 jQuery toggle() 函数来指定在每次连续点击时执行的操作:

$(".visibilitybutton").toggle(function(){
    $(this)
        .attr("title","Invisible")
        .find("span").toggleClass("icon84 icon85");
}, function(){
    $(this)
        .attr("title","Visible")
        .find("span").toggleClass("icon84 icon85");
});

如果你想提高效率，你可以像这样用一些好的技巧一次性完成所有的 jQuery:

var vis = ["Invisible","Visible"];
$(".visibilitybutton").click(function(){
    var i = 0;
    $(this)
        .attr("title",vis[i])
        .find("span").toggleClass("icon84 icon85");
    i = (i==0)?1:0;
});

更重要的是创建一个在添加元素时隐藏元素并在删除元素时显示元素的类(在 CSS 中应用 display:none 的类名可以正常工作):

$(".visibilitybutton").click(function(){
    $(this)
        .toggleClass("hide")
        .find("span").toggleClass("icon84 icon85");
});