javascript jquery не повторяется на аналогичных часах div не заполняется - PullRequest
0 голосов
/ 25 апреля 2020

У меня есть это html, и мне нужно добавить как можно больше div class = row с часами в нем. однако что-то нарушает код, и часы нормально работают на первом элементе div class = row, но срабатывают на всех последующих div, поэтому часы на втором, третьем и т. д. c не работают. что-то не так с моим javascript ... спасибо

`

            <table> 
                <tr>
                    <td class="for-sale-heading">
                        <h4>End Date:&nbsp;</h4>
                        <h5 class="time">04-30-20 15:00:00</h5>
                    </td>
                    <td class="for-sale-heading">
                        <div class="clock">
                            <div>
                                <span class="day"></span>
                                <div class="local-date">Days</div>
                            </div>
                            <div>
                                <span class="hour"></span>
                                <div class="local-date">Hours</div>
                            </div>
                            <div>
                                <span class="minute"></span>
                                <div class="local-date">Minutes</div>
                            </div>
                            <div>
                                <span class="second"></span>
                                <div class="local-date">Seconds</div>
                            </div>
                        </div>
                        <p class="closed"></p>
                    </td>
                </tr>

            </table>
        </div> 
    </div>

            <table> 
                <tr>
                    <td class="for-sale-heading">
                        <h4>End Date:&nbsp;</h4>
                        <h5 class="time">04-30-20 15:00:00</h5>
                    </td>
                    <td class="for-sale-heading">
                        <div class="clock">
                            <div>
                                <span class="day"></span>
                                <div class="local-date">Days</div>
                            </div>
                            <div>
                                <span class="hour"></span>
                                <div class="local-date">Hours</div>
                            </div>
                            <div>
                                <span class="minute"></span>
                                <div class="local-date">Minutes</div>
                            </div>
                            <div>
                                <span class="second"></span>
                                <div class="local-date">Seconds</div>
                            </div>
                        </div>
                        <p class="closed"></p>
                    </td>
                </tr>

            </table>
        </div> 
    </div>

            <table> 
                <tr>
                    <td class="for-sale-heading">
                        <h4>End Date:&nbsp;</h4>
                        <h5 class="time">04-30-20 15:00:00</h5>
                    </td>
                    <td class="for-sale-heading">
                        <div class="clock">
                            <div>
                                <span class="day"></span>
                                <div class="local-date">Days</div>
                            </div>
                            <div>
                                <span class="hour"></span>
                                <div class="local-date">Hours</div>
                            </div>
                            <div>
                                <span class="minute"></span>
                                <div class="local-date">Minutes</div>
                            </div>
                            <div>
                                <span class="second"></span>
                                <div class="local-date">Seconds</div>
                            </div>
                        </div>
                        <p class="closed"></p>
                    </td>
                </tr>

            </table>
        </div> 
    </div> 
<script type="application/javascript">
    $(document).ready(function() {
        var deadline = new Date("apr 30, 2020 15:00:00").getTime();
        var x = setInterval(function() {

            var now = new Date().getTime();
            var t = deadline - now;
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
            var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((t % (1000 * 60)) / 1000);
            document.getElementsByClassName("day")[0].innerHTML = days;
            document.getElementsByClassName("hour")[0].innerHTML = hours;
            document.getElementsByClassName("minute")[0].innerHTML = minutes;
            document.getElementsByClassName("second")[0].innerHTML = seconds;
            if (t < 0) {
                clearInterval(x);
                document.getElementsByClassName("closed")[0].innerHTML = "Auction Closed";
                document.getElementsByClassName("day")[0].innerHTML = '0';
                document.getElementsByClassName("hour")[0].innerHTML = '0';
                document.getElementsByClassName("minute")[0].innerHTML = '0';
                document.getElementsByClassName("second")[0].innerHTML = '0';
            }
        }, 1000);
    });

</script> 

введите описание изображения здесь

enter image description here

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

изображение часов

ну, это все еще не отвечает на мой вопрос ... мне нужно заполнить коллекцию .. я пробовал что-то подобное, но тоже не работает; я хочу, чтобы дни, минуты, часы, секунды появлялись и работали в реальном времени

  $(document).ready(function() {
        var deadline = new Date("apr 30, 2020 15:00:00").getTime();

        var x = setInterval(function() {

            var now = new Date().getTime();
            var t = deadline - now;
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
            var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((t % (1000 * 60)) / 1000);

            var els = document.getElementsByTagName("span");

            Array.prototype.forEach.call(els, function(el) {
                console.log(el.className);
                console.log(el.getElementsByClassName);
                switch (el.className) {
                    case "day":
                        console.log("day");
                        el.className.innerHTML = days;
                        $('day').innerHTML = days;
                        break;
                    case "hour":
                        console.log("hour");
                        el.className.innerHTML = hours;
                        $('hours').innerHTML = hours;
                        break;
                    case "minute":
                        console.log("minute");
                        el.className.innerHTML = minutes;
                        $('minute').innerHTML = minutes;
                        break;
                    case "second":
                        console.log("second");
                        el.className.innerHTML = seconds;
                        $('second').innerHTML = seconds;
                        break;
                }



}); }, 1000);});
0 голосов
/ 25 апреля 2020
 document.getElementsByClassName("day")[0].innerHTML = days;
 document.getElementsByClassName("hour")[0].innerHTML = hours;
 document.getElementsByClassName("minute")[0].innerHTML = minutes;
 document.getElementsByClassName("second")[0].innerHTML = seconds;

в приведенном выше коде обратите внимание на [0] за каждым элементом. Вы устанавливаете первый элемент в выбранном списке. Чтобы это работало должным образом, вам нужно поместить этот раздел в a для l oop и фактически установить все элементы, возвращаемые селекторами. То же самое верно для проверки ниже.

со второй попытки:

case "day":
    console.log("day");
    el.innerHTML = days;
    /*or if you want to use jquery */
    $('.day').html(days);
    break; 

className является атрибутом и не имеет внутреннего свойства HTML. Следующая строка имеет недопустимый селектор, когда вы используете jquery, вам нужно указать тип атрибута перед значением. Поскольку вы ищете атрибут класса, правильный селектор - «.» или '[class = "......."]'. При правильной установке строки бота, однако, будут делать то же самое: 1. в первой строке будет указан элемент, который передается в форме l oop, 2. во второй обновятся все элементы с правильным селектором (что делает l oop устарел).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...