проблемы, добавляя классы, сделав просьбу ajax

Я делаю код, который позволял бы мне пробегать изображения делая просьбу Аякс. А именно, я вижу изображение одновременно раз, так как я получаю данные, как array и я они показываю один из-за одного с функцией each, добавляю класс из-за каждой информации. В конце концов с javascript я перемещаю изображение одновременно, видя их как slideshow. До здесь всего добра, но я нуждаюсь в том, чтобы обновить DOM, отлаживая это каждый раз, когда реализовал просьбу Аякс. Я пробовал с методом .empty, но по какому-то разуму он не позволяет мне реализовывать код. Он был бы благодарен за любую помощь.

page1.php

<!DOCTYPE HTML>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $('.gallery').click(function (event) {
                event.preventDefault();
                var data = this.dataset;

            $.ajax({
                url: "page2.php",
                data: data,
                type: "POST",
                dataType: "json",
                success: function(data) {
                    var imgs = data.map(function(img) {
                        return '<img src="'+img+'" height=200px>';
                    });
                    $.each (imgs, function(i,val) {
                        $('.container').append('<div class="imagen numero' + i + '"></div>');
                        $('.imagen.numero' + i).html(val);
                    })
                    $.getScript("slides.js");
                } 
            });
        });
        })
    </script>  
    </head>

<body>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis</p>
    </div>

    <a class="gallery" href="page2.php" data-var="dir/1/">
        GALERIA 1
    </a><br>  

    <a class="gallery" href="page2.php" data-var="dir/2/">
        GALERIA 2
    </a>  

    <div class="container">
        <a class="prev" onclick="passSlides(-1)">❮</a>
        <a class="next" onclick="passSlides(1)">❯</a>
    </div>

</body>
</html>

page2.php

<?php
header('Content-Type: application/json');
$directorio = $_POST['var'];
echo json_encode (glob($directorio . '*.jpg'));
?>

slides.js

    var slideIndex = 1;
    showSlides(slideIndex);

    function passSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName('imagen');
        if (n > slides.length) {
            slideIndex = 1
        }    
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }
        slides[slideIndex-1].style.display = "block";  
    }
1
задан 19.01.2017, 18:45
0 ответов

Чтобы удалять только элементы <div class="imagen"> внутри <div class="container"> ты можешь использовать .remove().

Так например:

...
$(".container").find('.imagen').remove();
$.each (imgs, function(i,val) {
...
2
ответ дан 03.12.2019, 17:37

Я не могу комментировать тебе, так что я напечатаю и буду издавать ответ, чтобы расширять больше

Я нуждаюсь в том, чтобы обновить DOM, отлаживая это каждый раз, когда реализовал просьбу Аякс.

Я не думаю, что ты нуждаешься в том, чтобы отложить весь DOM, достаточно отлаживать контент контейнера, уникума inconveniento делания $(container).html(null) дело в том, что ты потерял бы контроль slider, так что самое простое решение состоит в том, чтобы менять эту часть кода.

Для html в page1

<body>
    ...
    <div class="container">
        <div></div>
        <a class="prev" onclick="passSlides(-1)">❮</a>
        <a class="next" onclick="passSlides(1)">❯</a>
    </div>
</body>

В Javascript

$(document).ready(function(){
    $('.gallery').click(function (event) {
        var data = this.dataset;
        var container_div = $('.container div');

        container_div.html(null); // limpia las imagenes 

        $.ajax({
            ...
            success: function(data) {
                ...
                $.each (imgs, function(i,val) {
                    container_div.append('<div class="imagen numero' + i + '"></div>');
                    $('.imagen.numero' + i).html(val);
                });
                ...
            } 
        });
        event.preventDefault();
    });
})

Единственная функция <div> созданный ранее это, чтобы спасать динамический, такой контент, если на escribe прямо на нем, он не затронет другие площади (как это случай контроля slider.)

1
ответ дан 03.12.2019, 17:37