Question

我做了一个测试，每个问题都以模态显示。相同的模态，每个问题后只改变内部的内容。结果也必须以相同的模态显示。为了显示结果，我使用progressbar.js（http://kimmobrunfeldt.github.io/progressbar.js/#examples）。这就是我在索引文件中的样子：

 function result() {

    $('.progress1').css('display', 'block');

    var startColor = '#FC5B3F';
    var endColor = '#6FD57F';

    var circle = new ProgressBar.Circle('.progress1', {
        color: startColor,
        easing: 'easeIn',
        strokeWidth: 8,
        trailWidth: 0,
        duration: 2000,
        text: {
            value: '0',
            style: {
                color: '#000'
            }
        },

        step: function(state, bar) {
            bar.setText((bar.value() * 100).toFixed(0));
        }
    });


    function rangeToPercent(number, min, max){
        return ((number - min) / (max - min));
    }
    var value = rangeToPercent(counterAnswer, 0, counterQ)





    // This will determine the circumference of the circle
    circle.animate(value, {
        from: {color: startColor},
        to: {color: endColor}, 
        step: function(state, circle, bar) {
            circle.path.setAttribute('stroke', state.color);
            console.log(circle);
            circle.setText((circle.value() * 100).toFixed(0));
        }
    });
}

在完成最后一个问题之后（当模态尚未可见时）我将模态内容更改为

 <h2 style='text-align: center; font-weight: bold;'>Your score is:</h3><br>
 <div style='margin: auto;' class='progress1' value='0'></div>

并向模态添加新类 $('#myModalTest').addClass('result');。在我的剧本中我有： $(".result").on('shown.bs.modal', function () { result(); });

但这不起作用。我试图将result();放入setTimeOut（并在没有$(".result").on('shown.bs.modal', function () {result();});的情况下运行），但之后会运行4次，创建4个圆圈（我不知道为什么）。请帮忙。

Answer 1

您是否动态加载模态内容？

我们遇到了这个问题，并通过在模态内容的末尾添加它来使其工作：

namespace :myAPI do

    BASE_URI = {
        live: "https://myapi.com/do/v1",
        beta: "https://beta.myapi.com/do/v1",
        local: "http://127.0.0.1:4500/do/v1"
    }

    BASE_URI .keys.each do |key|
      namespace key do |ns|
        desc 'Get currently logged users'
        task :extract_logged_users do
           puts 'get("%s")' % BASE_URI[key]
        end
      end
  end
end

当模态加载内容时，它将运行javascript。

Answer 2

再次阅读了您的问题后，我认为在将结果类添加到模式之前，正在运行将显示的事件添加到模态的代码。

所以页面加载并运行（可能是在页面末尾的脚本标签中？）：

$(".result").on('shown.bs.modal', function () {
    result();
});

选择器 $（“。result”）此时将找不到任何内容，因此您显示的事件不受任何限制。

然后将类结果添加到模态

$('#myModalTest').addClass('result');

并启动模态，但模态没有连接事件。

我认为你需要首先做到这一点：

$("#myModalTest").on('shown.bs.modal', function () {
    result();
});

因为为什么需要结果类？或者做：

$('#myModalTest').addClass('result').on('shown.bs.modal', function () {
    result();
});

添加类以添加事件时。

我还没有测试过任何一个，但逻辑似乎是正确的，这取决于代码中我看不到的内容。

如何在bootstrap模式弹出窗口上运行函数（javascript，jquery）

2 个答案: