j查询每个函数无法正常工作

jQuery each function not working properly

本文关键字：常工作 工作 查询 函数      更新时间：2023-09-26

我正在为民意调查生成循环计数器，其中我为每个答案绘制计数器。

我正在使用这个"插件"：http://blakek.us/labs/jquery/css3-pie-graph-timer/

问题：

它不会从<div>获取文本值，也不会为每个div 绘制计数器。

注意：对于一个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);
    });
});

这是工作小提琴：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元素。

您可以像这样传递事件处理程序：

// 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) + '%');
}

演示：小提琴

你不需要在这里指定每个（）函数 试试这个：

function myfun(){
        var percent = jQuery(this).text();
        console.log(percent);
        drawCounter(percent);
    });
jQuery('.pollAnswerBar').myfun();
相关文章：