1

div ヘッダーを切り捨てようとしています。私の関数は、可変スコープのためにバグがあります。

ここに私の機能が分解されています：

  1. 変数が適切にスコープされるように変数を設定する
  2. 各 div をループします。
    • 長いタイトルを保存
    • 切り捨てられたタイトルを作成する
    • 切り捨てられたタイトルを設定
  3. マウス入力時にフル タイトルを使用
  4. マウスを離すと、切り捨てられたタイトルを使用します

変数が正しく渡されるように、この関数を再配置するにはどうすればよいですか?

jQuery(document).ready(function($) {
    eventHover();
}); 


function eventHover(){

    // Set var scope
    var title = '';
    var shortText = '';
    var longText = '';

    // Change long titles to short version
    $('#event_promo .panel').each( function() {
        title = $(this).find($('h3 a'));
        longText = title.html();

        shortText = jQuery.trim(longText).substring(0, 50)
            .split(" ").slice(0, -1).join(" ") + "...";

        title.html(shortText);
    }); 

    // Add hover class and change title to long version
    $('#event_promo .panel .trigger').mouseenter(function () {
        $(this).parent().addClass('hover');
        title.html(longText);
    });

    // Remove hover class and revert title to short version
    $('#event_promo .panel .trigger').mouseleave(function () {
        $(this).parent().removeClass('hover');
        title.html(shortText);
    });

}
4

1 に答える 1

2

data()「グローバル」変数に対してこのメ​​ソッドを使用することをお勧めします。

$('#event_promo .panel').each( function() {

    var $title = $(this).find('h3 a');
    var longText = title.html();

    var shortText = jQuery.trim(longText).substring(0, 50)
        .split(" ").slice(0, -1).join(" ") + "...";

    $title.html(shortText);

    $(this).data({ shortText: shortText, longText: longText });
});

データを処理します。

$('#event_promo .panel .trigger').mouseenter(function () {

    var longText = $(this).closest('.panel').data('longText');
    var shortText = $(this).closest('.panel').data('shortText');

    //do stuff with the texts here

});
于 2012-10-18T11:25:07.193 に答える