Question

我不明白......如果我替换删除字体真棒并使用text（）而不是html（）这将有效...但如果我使用字体真棒图标尝试相同的代码，没有任何反应，文本不会在按钮上更改。我做错了什么？

＆＃13;

<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>
</a>
 
    <script>
    $( document ).ready(function() {
        $('.read-more').click(function(){
            $(this).parent().toggleClass('expanded');
        });
    
    	$('.read-more').on('click', function() { 
    		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>') {
    			$('.view-more-images').html('- VIEW LESS IMAGES -');
    		} else {
    			$('.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>');
    		}	
    	});
    
    	$('.read-more').on('click', function() { 
        	$('.view-more-toggle').css({ 'display': 'block' });
    	});
    });
    </script>

＆＃13;

Answer 1

我会改为使用相对子选择器和切换组合，默认情况下隐藏一个。我添加了一些CSS，使光标成为指针，防止用户在点击垃圾邮件时偶然选择文本。

＆＃13;

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

＆＃13;

.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+ */
}

＆＃13;

<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>

＆＃13;

使用jquery html（）匹配带有html内容的元素

1 个答案: