Rails 5：截断一些阅读更多并隐藏链接

Question

我使用以下代码来truncate一些文本。正如你在下面看到的，一切都很好。当前，Read more和Hide链路始终出现。有没有办法在未单击Read more时隐藏Hide链接，而在单击Read more时显示Hide链接？

<% @products.each do |product| %>
<% if product.description.size > 100 %>
<span class="truncated-paragraph-<%= product.id %>">
<%= truncate product.description, length: 100 %>
</span>
<span class="normal-paragraph-<%= product.id %>" style="display: none;">
<%= product.description %>
</span>
<a href="#" class="read-more-<%= product.id %>">Read More</a>
<a href="#" class="read-less-<%= product.id %>">Hide</a>
<% else %>
<%= product.description %>
<% end %>
<% end %>
<script type="text/javascript">
$('[class^="read-more"]').click(function(element) {
element.preventDefault()
$(`.truncated-paragraph-${elId($(this))}`).hide()
$(`.normal-paragraph-${elId($(this))}`).show()
})
$('[class^="read-less"]').click(function(element) {
element.preventDefault()
$(`.normal-paragraph-${elId($(this))}`).hide()
$(`.truncated-paragraph-${elId($(this))}`).show()
})
function elId(element) {
let elClassName = element.attr('class').split('-')
return elClassName[elClassName.length - 1]
}
</script>

$('[class^="read-more"]').click(function(element) {
element.preventDefault()
$(`.truncated-paragraph-${elId($(this))}`).hide()
$(`.normal-paragraph-${elId($(this))}`).show()
})
$('[class^="read-less"]').click(function(element) {
element.preventDefault()
$(`.normal-paragraph-${elId($(this))}`).hide()
$(`.truncated-paragraph-${elId($(this))}`).show()
})
function elId(element) {
let elClassName = element.attr('class').split('-')
return elClassName[elClassName.length - 1]
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="truncated-paragraph-1">
Morbi non est nec mi vulputate varius vel ac mi. In efficitur bibendum nibh nec fringilla. Integer nec est blandit, ullamcorper leo ...
</span>
<span class="normal-paragraph-1" style="display: none;">
Morbi non est nec mi vulputate varius vel ac mi. In efficitur bibendum nibh nec fringilla. Integer nec est blandit, ullamcorper leo iaculis, blandit dui. Suspendisse sem mauris, maximus quis porta elementum, fermentum in dolor. Curabitur egestas arcu ante. Praesent a efficitur leo. Proin molestie turpis in sapien porta varius. Sed nisl enim, blandit ac orci in, iaculis consectetur tellus.
Quisque sapien felis, gravida in leo eget, dictum tempus felis. Ut pulvinar ex nisi, et rutrum leo dignissim at. Integer facilisis facilisis odio. Quisque consequat, ex eu sodales posuere, orci tellus accumsan justo, vitae finibus turpis turpis et tortor. Praesent luctus consequat tortor vel egestas. Suspendisse finibus interdum varius. Curabitur facilisis aliquet diam ac aliquet. Phasellus in felis placerat, gravida velit at, pulvinar nulla. Mauris ut faucibus felis, vitae semper elit. Aenean vel tincidunt leo. Donec varius est a hendrerit eleifend. Maecenas iaculis porta tortor imperdiet blandit. Praesent fermentum mauris metus, eu pulvinar lectus euismod vitae.
</span>
<a href="#" class="read-more-1">Read More</a>
<a href="#" class="read-less-1">Hide</a>

Answer 1

您可以将段落封装在父div中，这样就更容易对交互进行编码：

$('.read-more').click(function(element) {
element.preventDefault()
$(this).parent().find('.truncated-paragraph').hide()
$(this).parent().find('.normal-paragraph').show()
$(this).hide()
$(this).parent().find('.read-less').show()
})
$('.read-less').click(function(element) {
element.preventDefault()
$(this).parent().find('.truncated-paragraph').show()
$(this).parent().find('.normal-paragraph').hide()
$(this).hide()
$(this).parent().find('.read-more').show()
})
function elId(element) {
let elClassName = element.attr('class').split('-')
return elClassName[elClassName.length - 1]
}

.hidden {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="paragraph">
<span class="truncated-paragraph">
Morbi non est nec mi vulputate varius vel ac mi. In efficitur bibendum nibh nec fringilla. Integer nec est blandit, ullamcorper leo ...
</span>
<span class="normal-paragraph" style="display: none;">
Morbi non est nec mi vulputate varius vel ac mi. In efficitur bibendum nibh nec fringilla. Integer nec est blandit, ullamcorper leo iaculis, blandit dui. Suspendisse sem mauris, maximus quis porta elementum, fermentum in dolor. Curabitur egestas arcu ante. Praesent a efficitur leo. Proin molestie turpis in sapien porta varius. Sed nisl enim, blandit ac orci in, iaculis consectetur tellus.
Quisque sapien felis, gravida in leo eget, dictum tempus felis. Ut pulvinar ex nisi, et rutrum leo dignissim at. Integer facilisis facilisis odio. Quisque consequat, ex eu sodales posuere, orci tellus accumsan justo, vitae finibus turpis turpis et tortor. Praesent luctus consequat tortor vel egestas. Suspendisse finibus interdum varius. Curabitur facilisis aliquet diam ac aliquet. Phasellus in felis placerat, gravida velit at, pulvinar nulla. Mauris ut faucibus felis, vitae semper elit. Aenean vel tincidunt leo. Donec varius est a hendrerit eleifend. Maecenas iaculis porta tortor imperdiet blandit. Praesent fermentum mauris metus, eu pulvinar lectus euismod vitae.
</span>
<a href="#" class="read-more">Read More</a>
<a href="#" class="read-less hidden">Hide</a>    
</div>