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

トグルトリガーをリンクを囲む 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/

テキストをもっと広げて、コンテナ全体を埋める方法を知っていればよかったのに

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 Debugger を使用する方法を学び、スローされるエラーを確認する必要があります。私が知る限り、var ourText = $(""+text+"").appendTo(self)あなたが投稿したコードブロックにもフィドルにも含まれていないので、あなたが何について話しているのかさえわかりません。

そう：

Javascript Debugger を使用する開発者コンソールを見つけます (Firefug は人気があり、Chrome には 1 つが組み込まれています。CTRL SHIFT J を押します)。
更新、エラーの検索 (ほとんどの場合赤)
質問を編集し (新しい質問をする方がよい場合があります)、エラーがスローされた場所の近くのコードと共にそのエラーを投稿します (通常、ファイルと行番号が提供されます)。
可能であれば、削除する予定のない公開サーバーに作品のサンプルをアップロードして、コミュニティが参照できるようにします。

jquery - Jquery 内にリンクを配置する

2 に答える 2

Related

Reference