在单个div中添加社交计数值

时间:2015-09-29 13:30:21

标签: javascript jquery html

我找到了一个PEN http://codepen.io/andreasstorm/pen/iefKk/,其中社交分数通过jQuery计算。我想在一个div中添加所有计数值。我怎么能这样做?

    <div class="share">
  Twitter - <span class="twCount">0</span> <br>
 Facebook - <span class="fbCount">0</span> <br>
  Pintrest - <span class="prCount">0</span><br>
  Linkedin - <span class="liCount">0</span>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
(function () {
    var countUp, setCount, url;
    url = 'http://www.digitalindia.gov.in/';
    $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=?', function (json) {
        return setCount($('.twCount'), json.count);

    });
    $.getJSON('http://graph.facebook.com/' + url, function (json) {
        return setCount($('.fbCount'), json.shares);
    });
    $.getJSON('http://api.pinterest.com/v1/urls/count.json?url=' + url + '&callback=?', function (json) {
        return setCount($('.prCount'), json.count);
    });
    $.getJSON('http://www.linkedin.com/countserv/count/share?url=' + url + '&callback=?', function (json) {
        return setCount($('.liCount'), json.count);
    });

    countUp = function ($item) {
        return setTimeout(function () {
            var current, newCount, target;
            current = $item.attr('data-current-count') * 1;
            target = $item.attr('data-target-count') * 1;
            newCount = current + Math.ceil((target - current) / 2);
            $item.attr('data-current-count', newCount);
            $item.html(newCount);
            if (newCount < target) {
                return countUp($item);
            }
        }, 100);
    };
    setCount = function ($item, count) {
        if (count == null) {
            count = null;
        }
        $item.attr('data-target-count', count);
        $item.attr('data-current-count', 0);
        return countUp($item);

    };
} .call(this));

//@ sourceURL=pen.js

1 个答案:

答案 0 :(得分:1)

你可以在setCount方法中添加一个add函数,因为它在每次getJSON成功后都在调用,

setCount = function ($item, count) {
    $("#total").text(parseInt($("#total").text().trim()) + count);
    if (count == null) {
        count = null;
    }
    $item.attr('data-target-count', count);
    $item.attr('data-current-count', 0);
    return countUp($item);

};

Fiddle