删除最后一次点击的跨度图标

Question

问题

我试图仅在最后单击的span.highlight上隐藏Font Awesome“加号”图标，并在不具有active类的情况下将其显示在span.highlight上，但现在它正在删除两个span.highlight上的图标，并且不显示在添加活动类后，将其关闭。

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>

Answer 1

您可以使用此：

$(".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/