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');