1

我们将 Drupal 用于我们维护的站点之一（并将 JQuery 作为库）。我们的页面之一是使用 jquery-isotope 插件（特别是 views-isotope 模块）在视图中排序，并使用 fancybox 来完整显示正文字段的内容。这是因为，就目前而言，body 的大部分内容都被 css 高度和溢出：隐藏。

可想而知，如此粗暴的方法看起来并不漂亮。大部分文字都被剪掉了，留下多余的衬线之类的东西，让它看起来特别“脏”。那么，下一步是截断文本并附加一个“...”，这样文本就不会被截断。

但是，fancybox 会将内容按原样拉入叠加层。因此，当您截断正文的文本时，它也会在叠加层中截断。

基本上，我的问题是，有没有办法截断文本，直到点击打开fancybox？单击时如何将完整内容发送到fancybox而不会丢失截断？当我开始使用 jsfiddle 来解决这个问题时，我没有将 isotope 或 fancybox 合并到我的计算中：我只是用一个子字符串构建它，克隆原始内容，然后在点击时替换子字符串。但是，正如您可以想象的那样，这会破坏页面，因为没有什么可以告诉它只针对fancybox 执行此操作，而不仅仅是随机执行。我也不知道如何在 fancybox 关闭时恢复文本的截断。

这是我的jsfiddle。

这是html：

<div class="element">
    <div class="item">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
            nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
            wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
            lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
            dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
            dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
            dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
            te feugait nulla facilisi. </p>
    </div>
</div>

这是CSS：

.item {
width:300px !important;
height: 150px;
overflow: hidden; }

这是脚本：

var originalState = $(".element").clone().text();

$(".item").each(function () {
    if ($(this).text().length > 30) {
        $(this).text($(this).text().substr(0, 27));
        $(this).append('...');
    }
});

$(".element").click(function () {
    $(this).replaceWith(originalState);
});

我将如何将它与fancybox联系起来，以便在您单击之前修剪文本，fancybox获取全文，然后关闭时，事情会恢复到之前的修剪样式？

注意：如果我的代码有任何致命错误，请告诉我。我在 JavaScript 和 JQuery 方面还很年轻，但是非常努力地学习。

谢谢。

4

1 回答 1

0

你已经成功了一半。

由于您已经克隆了原始文本：

var originalState = $(".element").clone().text();

...您唯一需要做的就是将它用作fancybox的内容，所以不要这样：

$(".element").click(function () {
    $(this).replaceWith(originalState);
});

... 做这个 ：

$(".element").click(function () {
    $.fancybox(originalState);
});

请参阅分叉的 JSFIDDLE

这将在 fancybox 中显示克隆的文本，并保留完整的修剪文本。

编辑（2013 年 2 月 28 日）：

如果您要克隆多个项目，那么您可以调整代码以将它们排列在一个数组中，并将 fancybox 分别绑定到每个项目，例如：

var originalState = new Array();
$(".item").each(function (i) {
    originalState[i] = $(this).clone().text();
    if ($(this).text().length > 30) {
        $(this).text($(this).text().substr(0, 27)).append('...');
    }
    $(this).click(function () {
        $.fancybox(originalState[i]);
    });
});

查看新的JSFIDDLE

于 2013-02-28T09:38:24.537 回答