1

回答ごとにカウンターを描画する投票用の循環カウンターを生成しています。

私はこの「プラグイン」を使用しています: http://blakek.us/labs/jquery/css3-pie-graph-timer/

問題：

テキスト値を取得し<div>ておらず、各divのカウンターを描画していません。

注: 1 つの div についてはうまく機能しています

例：

http://jsbin.com/AHUkoBA/3/edit

http://jsfiddle.net/mgcq9/

HTML:

<div class="pollAnswerBar">15</div>
<div class="pollAnswerBar">50</div>
<div class="pollAnswerBar">75</div>

JS:

jQuery(document).ready(function() {

    function drawCounter(percent) {
        jQuery('div.pollAnswerBar').html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
        var deg = 360 / 100 * percent;
        jQuery('#slice .pie').css({
            '-moz-transform': 'rotate(' + deg + 'deg)',
            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-o-transform': 'rotate(' + deg + 'deg)',
            'transform': 'rotate(' + deg + 'deg)'
        });
        jQuery('.percent').html(Math.round(percent) + '%');
    }

    jQuery('.pollAnswerBar').each(function() {
        var percent = jQuery(this).text();
        console.log(percent);
        drawCounter(percent);
    });

});
4

3 に答える 3

4

ここにフィドルが働いています：http://jsfiddle.net/fKPb6/

各要素を個別に指定するのではなく、すべての要素を変更していました。

これが作業コードです。

JS:

jQuery(document).ready(function () {

    function drawCounter(percent, element) {
        jQuery(element).html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
        var deg = 360 * (percent / 100);
        jQuery('#slice .pie', element).css({
            '-moz-transform': 'rotate(' + deg + 'deg)',
                '-webkit-transform': 'rotate(' + deg + 'deg)',
                '-o-transform': 'rotate(' + deg + 'deg)',
                'transform': 'rotate(' + deg + 'deg)'
        });
        jQuery('.percent', element).html(Math.round(percent) + '%');
    }

    jQuery('.pollAnswerBar').each(function (index, element) {
        var percent = jQuery(element).text();
        console.log(percent);
        drawCounter(percent, element);
    });

});

個々の要素の範囲に選択を制限することにより、たとえばjQuery('.percent', element)、すべての要素ではなく正しい要素をターゲットにしています.percent。

于 2013-10-28T09:17:03.367 に答える
2

次のようにイベント ハンドラーを渡すことができます。

// Pass the event handler here
jQuery('.pollAnswerBar').each(drawCounter);

次のように関数を呼び出します。

// Declare the event handler with params passed from .each()
function drawCounter(i, elm) {
    var percent = $(elm).text();
    jQuery(elm).html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
    var deg = 360 * (percent / 100);
    jQuery('#slice .pie', elm).css({
        '-moz-transform': 'rotate(' + deg + 'deg)',
            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-o-transform': 'rotate(' + deg + 'deg)',
            'transform': 'rotate(' + deg + 'deg)'
    });
    jQuery('.percent', elm).html(Math.round(percent) + '%');
}

デモ:フィドル

または、次のthisようにパラメーターを渡さずにキーワードのみを使用します。

// Pass the event handler here
jQuery('.pollAnswerBar').each(drawCounter);

// Declare the event handler using `this`
function drawCounter() {
    var percent = $(this).text();
    jQuery(this).html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
    var deg = 360 * (percent / 100);
    jQuery('#slice .pie', this).css({
        '-moz-transform': 'rotate(' + deg + 'deg)',
            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-o-transform': 'rotate(' + deg + 'deg)',
            'transform': 'rotate(' + deg + 'deg)'
    });
    jQuery('.percent', this).html(Math.round(percent) + '%');
}

デモ:フィドル

于 2013-10-28T09:26:40.413 に答える
0

ここで each() 関数を指定する必要はありません。これを試してください:

function myfun(){
        var percent = jQuery(this).text();
        console.log(percent);
        drawCounter(percent);
    });
jQuery('.pollAnswerBar').myfun();
于 2013-10-28T09:19:00.323 に答える