javascript - jQuery 显示/隐藏 chop 文本不起作用

Question

有人知道我在这里做错了什么吗？显示和隐藏文本在 chop 的元素中不起作用。

它似乎很好地 chop 了文本，并且链接切换正在工作，但只是没有扩展，等等。

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

Answer 1

从点击函数中删除 .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>