[英]matching element with html content using jquery html()
I don't understand... if i replace remove font awesome and use text() instead of html() this will work... But if i try the same code using font awesome icons, nothing happens and the text isn't changing on the button. 我不明白...如果我替换删除真棒字体并使用text()而不是html(),这将起作用...但是,如果我使用真棒字体图标尝试相同的代码,则什么也不会发生,并且文本不会在按钮上更改。 What am i doing wrong ?
我究竟做错了什么 ?
<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>
I would instead use a relative children selector and toggle combined with having one hidden by default. 相反,我将使用相对的子选择器并在默认情况下将其隐藏起来进行切换。 I added some CSS to make your cursor a pointer and prevent the user from accidenly selecting text when spam clicking.
我添加了一些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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.