jQuery切换图标

Question

嗨，我对javascript非常陌生，正尝试使用切换功能不仅提供显示/隐藏功能，而且还切换箭头图标。 例如，当链接说“更多”时，它旁边有一个向右箭头“更多->”，单击链接时，它变成带有向上箭头的“少^”。 我使用icomoon字体作为右箭头和上箭头。

到目前为止，这是我的代码，显示/隐藏功能正常运行，但是我认为必须有更好的切换箭头的方法。 当我第一次查看自己的网站时，会出现箭头，但是当我单击链接时，箭头消失了，最终我看到的是HTML代码而不是箭头。 我会共享一个链接，但是我正在身份验证后面的沙箱中工作：

    // choose text for the show/hide link
    var showText='More' + ' <span class="icon-arrow-right2"></span>';
    var hideText='Less' + ' <span class="icon-arrow-up2"></span>';

    // append show/hide links to the element directly preceding the element   
    with a class of "toggle"
    $(".toggle").prev().append(' (<a href="#"  
    class="toggleLink">'+showText+'</a>)');

    // hide all of the elements with a class of 'toggle'
    $('.toggle').hide();

   // capture clicks on the toggle links
   $('a.toggleLink').click(function() {

   // change the link text depending on whether the element is shown or hidden
   if ($(this).text()==showText) {
   $(this).text(hideText);
   $(this).parent().next('.toggle').slideDown('fast');
   }
   else {
   $(this).text(showText);
   $(this).parent().next('.toggle').slideUp('fast');
   }  

我的CSS看起来像这样：

    /* Main toggle */
    .toggle { 
      font-size: 14px;
      line-height:20px;
      font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,   
      sans-serif;
      background: #ffffff; /* Main background */
      margin-bottom: 10px;
      padding:5px;
      border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
    }

    /* Adding a right arrow to the More text */
    .icon-arrow-right2:before {
      content: "\ea3c";
    }

   /* Adding Up arrow to Less text */
    .icon-arrow-up2:before {
      content: "\ea3a";
    }

非常感谢您的时间和投入！

Answer 1

您可以使用toggle()和toggleClass()处理更改的显示内容以及单击的方式。

例如：

 // When the toggleLink is clicked, we'll toggle classes/text. $('.toggleLink').click(function () { /* Check if the showText class also has the hide class. We can use that to toggle text. Another way to do this is use the :visible selector on what we are hiding and showing, like so: $('.showHide:visible') */ if ($('.showText').hasClass('hide')) { /* We use .text() and not .html() here. If you want to place inline html, instead use .html(). The browser will render .text() this as plain text. */ $('.showText').text("Less"); } else { $('.showText').text("More"); } /* Here, we use .toggleClass() two ways. If one class is specified, jQuery will remove and add the class accordingly. If two (or more!) classes are specified, jQuery will instead swap between the two (or more!) accordingly. */ $('.showText').toggleClass('hide'); $('.showColor').toggleClass('more less'); /* Using .toggle(), jQuery will hide or show the element. You can nest things in toggle as well, like a function to do other things too! */ $('.showHide').toggle(); }); 

 .more { color: green; } .less { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle"> <div class="showText">Less</div> <a class="showColor less">Green=More, Red=Less</a> <br /> <div class="showHide">Stuff</div> </div> <a href="#" class="toggleLink">Test</a> 

上面的示例显示了toggle()和toggleClass()一些用法，以及替换元素中的文本。 我强烈建议您在其api文档中阅读使用jQuery可以完成的所有有趣工作，并建议使用Code Academy来帮助获得JavaScript和其他语言的基础知识。

Answer 2

您应该使用toggleClass ，它只有1个span元素，如下所示：

<span class="toggleIcon icon-arrow-right2"></span>

$('.toggleIcon').toggleClass('icon-arrow-right2 icon-arrow-up2');