與html內容使用jquery html（）

匹配元素我不明白...如果我更換刪除字體真棒和使用text（）而不是html（）這將工作...但如果我嘗試相同的代碼使用字體真棒圖標，沒有任何反應，並且文本在按鈕上沒有改變。我究竟做錯了什麼？與html內容使用jquery html（）

<a class="read-more" id="read-more"> 
 
    \t <span class="view-more-images" id="view-more-images"><i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i></span> 
 
</a> 
 
    
 
    <script> 
 
    $(document).ready(function() { 
 
     $('.read-more').click(function(){ 
 
      $(this).parent().toggleClass('expanded'); 
 
     }); 
 
    
 
    \t $('.read-more').on('click', function() { 
 
    \t \t if ($('.view-more-images').html() == '<i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i>') { 
 
    \t \t \t $('.view-more-images').html('- VIEW LESS IMAGES -'); 
 
    \t \t } else { 
 
    \t \t \t $('.view-more-images').html('<i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i>'); 
 
    \t \t } \t 
 
    \t }); 
 
    
 
    \t $('.read-more').on('click', function() { 
 
     \t $('.view-more-toggle').css({ 'display': 'block' }); 
 
    \t }); 
 
    }); 
 
    </script>

來源

2017-05-03 comdex

你可以分享工作搗鼓這個 –

（$（」視圖更多圖像）。HTML（）返回HTML不是一個字符串 – madalinivascu

我反而使用相對孩子選擇和切換結合有一個默認隱藏。我添加了一些CSS來使光標成爲指針，並防止用戶在點擊垃圾郵件時偶然選擇文本。

$(document).ready(function() { 
 
    $('.read-more').on('click', function() { 
 
     $(this).children().toggle(); 
 
    }); 
 
});

.read-more { 
 
    cursor:pointer; 
 
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */ 
 
    -moz-user-select: none; /* mozilla browsers */ 
 
    -khtml-user-select: none; /* webkit (konqueror) browsers */ 
 
    -ms-user-select: none; /* IE10+ */ 
 
}

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="read-more" id="read-more"> 
 
    <span class="view-more-images" id="view-more-images"><i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i></span> 
 
    <span class="view-more-images" style="display:none" id="view-less-images"><i class="fa fa-minus" aria-hidden="true"></i> VIEW LESS IMAGES <i class="fa fa-minus" aria-hidden="true"></i></span> 
 
</a>

來源

2017-05-03 02:56:30 Neil

這實在是一個更好的方法實現我想做的事。非常感謝！ – comdex

與html內容使用jquery html（）

回答

相關問題