Question

我正在使用jsfiddle http://jsfiddle.net/mekwall/fNyHs/上的代码，因为它似乎对我的情况最好，因为我需要动态文本来容纳容器（通过更改字体大小）。

(function($) {
$.fn.textfill = function(maxFontSize, maxWords) {
    maxFontSize = parseInt(maxFontSize, 10);
    maxWords = parseInt(maxWords, 10) || 4;
    return this.each(function(){
        var self = $(this),
            orgText = self.text(),
            fontSize = parseInt(self.css("fontSize"), 10),
            lineHeight = parseInt(self.css("lineHeight"), 10),
            maxHeight = self.height(),
            maxWidth = self.width(),
            words = self.text().split(" ");

        function calcSize(text) {
            var ourText = $("<span class='dyntextval'><a href='#' class='trigger'>"+text+"</a></span>").appendTo(self),
                multiplier = maxWidth/ourText.width(),
                newSize = fontSize*(multiplier-0.1);
            ourText.css(
                "fontSize", 
                (maxFontSize > 0 && newSize > maxFontSize) ? 
                    maxFontSize : 
                    newSize
            );
            var scrollHeight = self[0].scrollHeight;
            if (scrollHeight  > maxHeight) {
                multiplier = maxHeight/scrollHeight;
                newSize = (newSize*multiplier);
                ourText.css(
                    "fontSize", 
                    (maxFontSize > 0 && newSize > maxFontSize) ? 
                        maxFontSize : 
                        newSize
                );
            }
        }
        self.empty();
        if (words.length > maxWords) {
            while (words.length > 0) {
                var newText = words.splice(0, maxWords).join(" ");
                console.log
                calcSize(newText);
                self.append("<br>");
            }
        } else {
            calcSize(orgText);
        }
    });
};
})(jQuery);



$(document).ready(function() {
$('.large').textfill({ maxFontPixels: 120, minFontPixels: 36});
$('.medium').textfill({ maxFontPixels: 32 });
$('.small').textfill({ maxFontPixels: 18 });        
});

但我对这部分有疑问：

var ourText = $(""+text+"").appendTo(self),

问题是我需要一个内部链接，一旦点击就切换另一个div。

切换：

$(".side-toggle").hide();
$('.trigger').click(function() {
    $(this).closest('.group').find('.side-toggle').slideToggle();
    return false; //Prevent the browser jump to the link anchor
});

$(".toggle").click(function() {
    $(this).next(".group").slideToggle();
});

切换本身就可以工作，但是当我也实现代码文本填充代码时也不行。

html：

<div class="quepasa">
  <div class="large artist">
    <span class="dyntextval">
      <a title="<?php the_title();?>" href="#" class="trigger">
        <?php if ( get_the_title() ) the_title(); else the_ID(); ?>+
      </a>
    </span>
  </div>
</div>

我没有足够的jQuery知识来了解如何： a）把链接放进去？ b）保持切换功能

我希望有人可以帮助我。

Answer 1

你的切换发生的事情是Javascript堆栈的中断，或者简单地说，早期的错误会让其他一切都变成地狱。

示例：

我们说这会导致错误（无法在bar上致电undefined）

var darth = $('#foo').data().bar;

然后在这段代码中：

$('#threepeeoh').hide();
var darth = $('#foo').data().bar;
$('luke').show('fade', 500);

#luke将永远不会显示，因为之前的线路上有错误。 #threepeeoh能够隐藏，因为他在darth出现之前就这样做了并且犯了一个错误。在此之后发生的任何代码很可能都不会被执行。（值得谷歌搜索“JS try / catch blocks”）

因此，当您添加文本填充代码时，必须抛出错误并使其看起来，就像您的切换是FUBAR一样。

就错误而言，您需要学习为Web浏览器使用Javascript调试器，并查看引发的错误。据我所知，var ourText = $(""+text+"").appendTo(self)甚至不是你发布的代码块，也不是小提琴，所以我甚至都不知道你在谈论什么。

所以：

找一个开发者控制台使用Javascript调试器（Firefug很受欢迎，Chrome有一个内置，点击CTRL SHIFT J）
刷新，查找错误（最有可能是红色）
编辑你的问题（可能最好问一个新问题）并在错误被抛出的位置附近发布错误（通常提供文件和行号）
如果可能，请将您的工作样本上传到您不打算删除的公共服务器，以便社区可以引用它。

Answer 2

通过将切换触发器移动到链接周围的div来解决它：的 HTML：

<div class="group"> <div class="large trigger"><a title="<?php the_title();?>" href="#" class="large"><?php if ( get_the_title() ) the_title(); else the_ID(); ?>+</a></div> <div class="side-toggle">Content of the toggle</div>

切换脚本：

$(".side-toggle").hide(); $('.trigger').click(function() { $(this).closest('.group').find('.side-toggle').slideToggle(); return false; //Prevent the browser jump to the link anchor });

Textfill脚本：

(function($) { $.fn.textfill = function(maxFontSize, maxWords) { maxFontSize = parseInt(maxFontSize, 10); maxWords = parseInt(maxWords, 10) || 4; return this.each(function(){ var self = $(this), orgText = self.text(), fontSize = parseInt(self.css("fontSize"), 10), lineHeight = parseInt(self.css("lineHeight"), 10), maxHeight = self.height(), maxWidth = self.width(), words = self.text().split(" "); function calcSize(text) { var ourText = $("<span>"+text+"</span>").appendTo(self), multiplier = maxWidth/ourText.width(), newSize = fontSize*(multiplier-0.1); ourText.css( "fontSize", (maxFontSize > 0 && newSize > maxFontSize) ? maxFontSize : newSize ); var scrollHeight = self[0].scrollHeight; if (scrollHeight > maxHeight) { multiplier = maxHeight/scrollHeight; newSize = (newSize*multiplier); ourText.css( "fontSize", (maxFontSize > 0 && newSize > maxFontSize) ? maxFontSize : newSize ); } } self.empty(); if (words.length > maxWords) { while (words.length > 0) { var newText = words.splice(0, maxWords).join(" "); console.log calcSize(newText); self.append("<br>"); } } else { calcSize(orgText); } }); }; })(jQuery); $(document).ready(function() { $('.large').textfill(120, 42); $('.medium').textfill(90,24); $('.small').textfill(24,18); });

CSS：

.large, .medium, .small {text-align: center;white-space:nowrap; overflow: hidden;word-wrap: break-word;width:526px; max-width:526px; } .large{line-height:180px;} .medium {letter-spacing:2px; line-height:72px;} .small {letter-spacing:2px; line-height:18px;}

示例： http://jsfiddle.net/inTOWN/vxSze/10/

只希望我知道如何更多地传播文本，所以它会填满整个容器

将链接放在Jquery中

2 个答案: