删除上次单击跨度上的图标

Remove icon on last clicked span

本文关键字：图标 单击 删除      更新时间：2023-09-26

问题

我试图只在上次单击的span.highlight上隐藏Font Awesome"plus"图标，并在没有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>

您可以使用这个：

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

相关文章：