删除最后点击的跨度上的图标

时间:2015-08-11 18:29:16

标签: javascript jquery font-awesome

问题

我试图隐藏字体真棒"加"仅在最后点击的span.highlight上显示图标并在没有active类的跨度上显示该图标,但是现在它删除了两个图标上的图标并且不显示在添加活动课程后启动。

JSFiddle:http://jsfiddle.net/dg6w2sk2/

scripts.js中

$(".highlight").click(function() {
   $(".highlight").removeClass("active"); // Remove active class from spans
   $(this).addClass("active");  // Add an active class to span just clicked
   $(".fa-plus-circle").hide();  // Remove plus sign on active span
   $(".info").fadeIn(); // Fade in the info box to the left
});

的index.html

<p><span class="highlight underline active" title="Read about the 'Clutter Hoarding Scale'"><i class="fa fa-plus-circle"></i> Next level church-key Shoreditch brunch</span> readymade. Chia pickled whatever, Blue Bottle farm-to-table messenger bag Neutra disrupt you probably haven't heard of them keytar dreamcatcher biodiesel banjo cardigan. Actually cliche you probably haven't heard of them put a bird on it tattooed, cray Bushwick irony selfies synth lomo gastropub. <span class="highlight underline"><i class="fa fa-plus-circle"></i>Tousled occupy Schlitz Austin.</span></p>

1 个答案:

答案 0 :(得分:0)

您可以使用:

$(".highlight").click(function() {
       $(".highlight").removeClass("active"); // Remove active class from spans
        $(".fa-plus-circle").show();

       $(".info").fadeIn(); // Fade in the info box to the left

       var active = $(this).hasClass("active");
       /*if (active) {
            $(this).find(".fa-plus-circle").hide();  // Remove plus sign on active span
       } else {
            $(this).find(".fa-plus-circle").show();
       }*/

        $(this).addClass("active");  // Add an active class to span just
        $(this).find(".fa-plus-circle").hide();
    });

此处示例:http://jsfiddle.net/dg6w2sk2/6/