Question

我尝试使用this question的解决方案来显示分数。问题是我不知道如何制作它以便它可以处理动态生成的分数。这是jQuery代码块：

$(document).ready(function() {

    $('#main').on('click', '#startButton', function () {
        $('#startButton').hide();
        $('#main').html('<div class="progress">progress</div><hr><div class="questions"><span class="fraction">1/2</span></div><hr><div class="answers">answers</div>');
    });

    $('.fraction').each(function(key, value) {
        $this = $(this);
        var split = $this.html().split("/");
        if(split.length == 2){
            $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>');
        }    
    });

});

我意识到.each（）函数不起作用，因为它将对象传递给#main。 这是jsfiddle说明我的问题。点击“占位符开始按钮”以查看分数

Answer 1

您可以在onclick中添加每个函数来调用。

$(document).ready(function() {

    $('#main').on('click', '#startButton', function () {
        $('#startButton').hide();
        $('#main').html('<div class="progress">progress</div><hr><div class="questions"><span class="fraction">1/2</span></div><hr><div class="answers">answers</div>');

        $('.fraction').each(function(key, value) {
        $this = $(this);
        var split = $this.html().split("/");
        if(split.length == 2){
            $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>');
        }    
    });

    });



});

这是小提琴 - http://jsfiddle.net/sentmca/kj6Us/

Answer 2

$(document).ready(function() {

    $('#main').on('click', '#startButton', function () {
        $('#startButton').hide();
        $('#main').html('<div class="progress">progress</div><hr><div class="questions"><span class="fraction">1/2</span></div><hr><div class="answers">answers</div>');

    $('.fraction').each(function(key, value) {
        $this = $(this);
        var split = $this.html().split("/");
        if(split.length == 2){
            $this.html('<span class="top">'+split[0]+'</span><span class="bottom">'+split[1]+'</span>');
        }    
    });
    });


});

如何使用动态生成的内容来完成这项工作？

2 个答案: