jquery - 在 Jquery 中放置链接

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) 保留切换功能

我希望有人可以帮助我。

score 0 · Accepted Answer

您的切换发生的事情是 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 块”）

所以，当你添加你的文本填充代码时，它一定会抛出一个错误并使你的切换看起来像是 FUBAR。

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

所以：

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

score 0 · Accepted Answer

通过将切换触发器移动到链接周围的 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
});

文本填充脚本：

(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 - 在 Jquery 中放置链接

2 回答 2

Related

Reference