有没有人有想法我在这里做错了什么？显示和隐藏文本在截断元素中不起作用。
它似乎正在截断文本，链接切换正在工作但只是没有扩展等。
// truncate and show / hide long descriptions
var charLimit = 300;
function truncate(el) {
var text = el.html();
el.attr("data-originalText", text);
el.text(text.substring(0, charLimit) + "...");
}
function reveal(el) {
el.append(el.attr("data-originalText"));
}
$(".truncated").each(function() {
truncate($(this));
});
$("a").on("click", function(e) {
e.preventDefault();
if ($(this).text() === "Show") {
$(this).text("Hide");
reveal($(this).prev());
} else {
$(this).text("Show");
truncate($(this).prev());
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel show">
<div class="truncated">
<p class="p1"><span class="s1">A premium set of essential eye brushes which every girl needs to create the perfect eye</span>
</p>
<p class="p1"><span class="s1">-Engineered for precise application<br /></span><span class="s1">-Sculpted brushes for a dramatic look<br /></span><span class="s1">-Soft bristles for the perfect blend<br /></span><span class="s1">-High pigment application</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span class="s1">Set includes:</span><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">EMBASE-IT</span></span>
</p>
<p class="p1"><span class="s1">An essential for creating the perfect bas colour. This brush is great for the application of powders or creamy shadows to the entire lid. Easy to build and blend colour for a more intense finish.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">CREASE POLICE</span></span>
</p>
<p class="p1"><span class="s1">This sneaky little number is your new partner in crime. To create just the right amount of drama, use the soft angle to add shade to your eyes.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">BLEND BABY BLEND</span></span>
</p>
<p class="p1"><span class="s1">Lightly buff this baby across the eye lid to work in that light and shade, achieving a super sexy eye.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">FEELING FINE</span></span>
</p>
<p class="p1"><span class="s1">This is the prefect brush to be the finest girl on the block. The pointed tip developed for ultimate control of your gel, liquid and cream liners.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">IT’S A WING THING</span></span>
</p>
<p class="p1"><span class="s1">Define those wings with a firm, fluid application reaching your lash line. And if you want to be super fleeky, fill in those eyebrows for a strong brow game.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span class="s1">Help your brushes stay clean and hygienic by washing in warm soapy water, for a deep clean use our brush cleansing tool. Air dry so the shape stays perfect.</span>
</p>
</div>
<a href="#">Show</a>
</div>
答案 0 :(得分：3)
从你的点击功能中删除.find()，因为前面的元素是你要显示/隐藏的元素，添加find（）是失败的，因为它会查找一个没有的后代存在。例如，使用reveal($(this).prev());：
// truncate and show / hide long descriptions
var charLimit = 300;
function truncate(el) {
var text = el.html();
el.attr("data-originalText", text);
el.html(text.substring(0, charLimit) + "...");
}
function reveal(el) {
el.html(el.attr("data-originalText"));
}
$(".truncated").each(function() {
truncate($(this));
});
$("a").on("click", function(e) {
e.preventDefault();
if ($(this).text() === "Show") {
$(this).text("Hide");
reveal($(this).prev());
} else {
$(this).text("Show");
truncate($(this).prev());
}
});.s1 {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel show">
<div class="truncated">
<p class="p1"><span class="s1">A premium set of essential eye brushes which every girl needs to create the perfect eye</span>
</p>
<p class="p1"><span class="s1">-Engineered for precise application<br /></span><span class="s1">-Sculpted brushes for a dramatic look<br /></span><span class="s1">-Soft bristles for the perfect blend<br /></span><span class="s1">-High pigment application</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span class="s1">Set includes:</span><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">EMBASE-IT</span></span>
</p>
<p class="p1"><span class="s1">An essential for creating the perfect bas colour. This brush is great for the application of powders or creamy shadows to the entire lid. Easy to build and blend colour for a more intense finish.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">CREASE POLICE</span></span>
</p>
<p class="p1"><span class="s1">This sneaky little number is your new partner in crime. To create just the right amount of drama, use the soft angle to add shade to your eyes.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">BLEND BABY BLEND</span></span>
</p>
<p class="p1"><span class="s1">Lightly buff this baby across the eye lid to work in that light and shade, achieving a super sexy eye.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">FEELING FINE</span></span>
</p>
<p class="p1"><span class="s1">This is the prefect brush to be the finest girl on the block. The pointed tip developed for ultimate control of your gel, liquid and cream liners.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span style="text-decoration: underline;"><span class="s2">IT’S A WING THING</span></span>
</p>
<p class="p1"><span class="s1">Define those wings with a firm, fluid application reaching your lash line. And if you want to be super fleeky, fill in those eyebrows for a strong brow game.</span>
</p>
<p class="p1"><span class="s1"> </span>
</p>
<p class="p1"><span class="s1">Help your brushes stay clean and hygienic by washing in warm soapy water, for a deep clean use our brush cleansing tool. Air dry so the shape stays perfect.</span>
</p>
</div>
<a href="#">Show</a>
</div>