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");
});

如果你想提高效率，你可以用一些好的技巧一次性地完成所有这些事情：

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");
});

Answer 2

你需要有独特的ID;因此，您应该按类选择项目。您可以使用toggle()来处理连续点击，也可以使用toggleClass()来处理类的交换。

<强> HTML ：

<a href="#" class="button" title="Visible"><span class="icon icon84"></span></a>
<a href="#" class="button" title="Invisible"><span class="icon icon85"></span></a>

<强>的Javascript ：

 $(document).ready(function () { 
    $('.button').toggle(function() {
          var $button = $(this);

          $button.prop("title","Invisible");
          $button.find('.icon85').toggleClass('icon85', 'icon84');
    }, function() {
          var $button = $(this);

          $button.prop("title","Visible");
          $button.find('.icon85').toggleClass('icon84', 'icon85');
    });
 });

Answer 3

id属性应该对每个元素都是唯一的。将id属性更改为每个超链接的class属性。

然后，在您的jQuery代码中，按类名获取超链接：

$('.visbilitybutton').click(function() {
    // code goes here
});

在事件处理程序中，您应该使用title属性进行测试，如下所示：

$('.visibilitybutton').click(function() {
    $this = $(this);
    if ($this.attr("title") == "Visible")
        $this.attr("title", "Invisible").find("span")
            .removeClass("icon85").addClass("icon84");
    else
        $this.attr("title", "Visible").find("span")
            .removeClass("icon84").addClass("icon85");
});

JQuery显示/隐藏链接

3 个答案: