jQuery вызывает одну и ту же функцию несколько раз с разными входными данными для одного и того же имени div

Question

ОК, поэтому я использую плагин jQuery с именем CountUp: http://blog.ogulcanorhan.com/weekend-project-jquery-countup-plugin/

Сценарий довольно прост:

<script type="text/javascript">
    $(document).ready(function(){
            $('#jq_count_up').countUp({'lang':'en', 'format':'full', 'sinceDate': 'dd/mm/YYYY-hh:mm:ss'});
    });

Так что jQuery занимаетначальная временная метка (дд / мм / гггг-чч: мм: сс), а затем возвращает дни, часы, минуты, секунды с момента ввода временной метки выше.Результат будет отображаться рядом с тегом, как показано ниже:

Достаточно просто, и это прекрасно работает, если вы используете код только один раз на странице.У меня есть несколько временных меток, к которым я хочу применить этот скрипт.Приложение представляет собой очередь электронной почты о том, как долго люди ждали.Чтобы попытаться это исправить, я динамически сгенерировал метку времени через PHP на стороне сервера и также изменил имя div, чтобы оно было уникальным для каждой из нескольких меток времени.Например, вот вывод моего PHP:

....................

    </td><td>
<script type="text/javascript">
    $(document).ready(function(){
        $('#jq_count_up-4').countUp({'lang':'en', 'format':'full', 'sinceDate': '04/12/2011-14:56:33'});
    });
</script>
<div id="jq_count_up-4"></div>
</td><td>

(затем позжев том же выводе HTML:

</td><td>
<script type="text/javascript">
    $(document).ready(function(){
        $('#jq_count_up-2').countUp({'lang':'en', 'format':'full', 'sinceDate': '04/12/2011-08:44:43'});
    });
</script>
<div id="jq_count_up-2"></div>
</td><td>

Итак, обратите внимание, что я сделал 2 вещи, чтобы попытаться решить эту проблему:

• Я изменил имя ссылки на тег имени divв сценарии (я думаю) от '#jq_count_up-2' до '#jq_count_up-X', где X - уникальное число.
• Я изменил имя тега <div id=>, чтобы он также был уникальным и таким жеимя как в # 1 выше.

Таким образом, в результате все еще работает только одна из меток времени, и она является последней на странице ..... Любая помощь будет оценена!

Answer 1

Не похоже, что плагин предназначен для использования более одного раза на странице. Плагины jQuery должны быть разработаны специально для этого (вот краткое введение в , как достичь нескольких экземпляров ). Из кода плагина видно, что глобальные переменные устанавливаются, поэтому второй экземпляр плагина перезапишет счетчик в первом и т. Д.

Вы можете либо настроить плагин для поддержки нескольких экземпляров и отправить его обратно автору (он вас полюбит), либо найти другой.

Надеюсь, это поможет.

Answer 2

Я смог создать несколько экземпляров, используя это:

<script type="text/javascript">
    function startClock(time,id) {
        var myDate = new Date();
        myDate.setSeconds(myDate.getSeconds() - time);
        var prettyDate = ('0' + myDate.getDate()).slice(-2) + '/' + ('0' + (myDate.getMonth()+1)).slice(-2) + '/' + myDate.getFullYear() + '-' + ('0' + myDate.getHours()).slice(-2) + ':' + ('0' + myDate.getMinutes()).slice(-2) + ':' + ('0' + myDate.getSeconds()).slice(-2);
        $("#time"+id).countUp({'lang':'en', 'format':'full', 'sinceDate': ''+prettyDate+''});
    }
</script>

И затем в вашем HTML просто укажите функцию time и id этого экземпляра счетчика.Таким образом, есть несколько таймеров, которые могут запускаться из разных мест отметок времени.

Answer 3

используйте $(document).ready(function() только один раз и попробуйте выглядеть так, как будто вы используете эту функцию более одного раза.