javascript - JS动态隐藏/删除具有相同类名的div

Question

简而言之，我有一个包含多行的表格。在每个主行下方我都有一个隐藏行，当按下时，会显示一个上传文件的输入和一个进行上传的按钮。我想要做的是在处理图像时显示 .gif 并在完成后删除 .gif，以便用户知道实际正在发生某些事情。每个“上传”行都有自己的 .gif，因此当单击上传按钮时，.gif 应该从 display: none 更改为 visible/inline-block。完成提取以上传文件，如果成功，它应该删除 .gif，唯一的问题是 js 不首先记住其余的 .gif。

我附上一些图片，然后附上js代码。

在这里你可以看到，如果你按下 + 符号，它会显示它下面的行，而 ID 为 4 和 5 的行被隐藏，因为没有按下按钮。

这是在上传过程中，当我点击上传 时会发生什么，添加了 .gif。

在这第三个中，所有 3 个都已经完成，因为我有一个警报作为调试目的的确认。虽然您可以看到只有一个消失了，但其余的 .gif 仍然可见。我想要的是，一旦提取的响应正常，它就应该删除相应的 .gif，尽管我不知道如何解决这个问题，甚至不知道如何开始。我可能想过一个数组来存储哪些是通过数据接收到的 - * 但后来它没有意义，因为我需要从服务器发送带有该数字的响应。

代码:

function uploadPhotos(url, queryCollection){
    this.url = url;
    this.queryCollection = queryCollection;

    this.upload = function(){
        queryCollection.forEach(function(el){
            el.addEventListener('submit', e => {
                loadingGifEl = el.nextElementSibling;
                button = el.closest('form').querySelector('input[type=submit]');
                e.preventDefault();
                if (loadingGifEl.classList.contains('hidden')) {
                    loadingGifEl.classList.remove('hidden');
                    button.classList.add('hidden');
                }
                 const files = el.querySelector('[type=file]').files;
                // const contentID = el.closest('tr').getAttribute('data-content-id');
                if(el.closest('tr') == null){
                    var contentID = 0;
                }else{
                    var contentID = el.closest('tr').getAttribute('data-content-id');
                }
                let formData = new FormData();

                for (let i = 0; i < files.length; i++) {
                    let file = files[i];
                    formData.append('image_field[]', file, contentID + '___' + file.name);
                }
                /* Original working */
                fetch(url, {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.text())
                .then(data => {
                    if (this.button.classList.contains('hidden')) {
                        this.loadingGifEl.classList.add('hidden');
                        this.button.classList.remove('hidden');
                    }
                    if(Number.isInteger(parseInt(data)) != true)
                        alert('Erro ao inserir na base de dados');

                    console.log(data);
                })
                .catch(function(error){
                    if (this.button.classList.contains('hidden')) {
                        this.loadingGifEl.classList.add('hidden');
                        this.button.classList.remove('hidden');
                    }
                    alert('Erro em fazer upload');
                    console.log(error);
                });
            });
        });
    }
}

HTML 是如何构建的:

            <table class="table table-hover" id="city-table">
            <thead>
                <th>ID</th>
                <th>Nome(PT)</th>
                <th>Descrição(PT)</th>
                <th>Popular</th>
                <th>Adicionado</th>
                <th>Galeria</th>
                <th>Ação</th>
            </thead>
            <tbody>
                <?php
                    $resp = $city->fetchAll();
                    if(!empty($resp)){
                        for($cityCounter = 0; $cityCounter < count($resp); $cityCounter++){
                            switch($resp[$cityCounter]->isPopular){
                                case 0: $isPopular = 'Não';
                                    break;
                                case 1: $isPopular = 'Sim';
                                    break;
                            };
                            echo '<tr data-content-type="city" data-content-id="'.$resp[$cityCounter]->city_link_ID.'">';
                            echo '<td>'.$resp[$cityCounter]->city_link_ID.'</td>';
                            echo '<td>'.$resp[$cityCounter]->nameTranslated.'</td>';
                            echo '<td>'.$resp[$cityCounter]->descriptionTranslated.'</td>';
                            echo '<td>'.$isPopular.'</td>';
                            echo '<td>'.$resp[$cityCounter]->dateCreated.'</td>';
                            echo '<td>
                                    <a class="btn btn-info btn-xs" id="show-gallery" href="#collapseGallery-'.$resp[$cityCounter]->city_link_ID.'" data-toggle="collapse">
                                        <i class="lnr lnr-plus-circle"></i>
                                    </a>
                            </td>';
                            echo '<td>
                                <a href="?edit=city&id='.$resp[$cityCounter]->city_link_ID.'" class="btn btn-info btn-xs pull-left"  style="margin-bottom: 15px"><span class="lnr lnr-pencil"></span></a>
                                <button class="btn btn-danger btn-xs pull-right" id="delete-city"><span class="lnr lnr-trash"></span></button>
                            </td></tr>';
                            echo'
                            <tr data-content-type="city" data-content-id="'.$resp[$cityCounter]->city_link_ID.'" id="collapseGallery-'.$resp[$cityCounter]->city_link_ID.'" class="collapse">
                                <td colspan="14" class="bg-info">
                                    <form enctype="multipart/form-data" method="post" class="file-upload" id="'.$resp[$cityCounter]->city_link_ID.'">
                                        <input type="file" class="btn btn-info pull-left" size="100" name="image_field[]" multiple="multiple">
                                        <input type="submit" class="btn btn-primary pull-right" name="Submit" value="Upload">
                                    </form>
                                    <div class="loading-gif-'.$resp[$cityCounter]->city_link_ID.' hidden">
                                        <img style="margin-left: 25%" src="assets/img/processing.gif" alt="A carregar"/>
                                    </div>
                                </td>
                            </tr>
                            ';
                        }
                    }
                ?>
            </tbody>
        </table>

Answer 1

loadingGifEl 的使用 vs this. loadingGifEl 似乎很可疑。如果我正确理解你的问题，你想跟踪你显示的实际 gif，这样你就可以在获取完成后再次隐藏它。下面应该工作，虽然没有测试。如果这不是您想要的，请告诉我。

function uploadPhotos(url, queryCollection){
    this.url = url;
    this.queryCollection = queryCollection;

    this.upload = function(){
        queryCollection.forEach(function(el){
            el.addEventListener('submit', e => {

                var loadingGifEl = el.nextElementSibling;
                var button = el.closest('form').querySelector('input[type=submit]');

                e.preventDefault();
                if (loadingGifEl.classList.contains('hidden')) {
                    loadingGifEl.classList.remove('hidden');
                    button.classList.add('hidden');
                }
                 const files = el.querySelector('[type=file]').files;
                // const contentID = el.closest('tr').getAttribute('data-content-id');
                if(el.closest('tr') == null){
                    var contentID = 0;
                }else{
                    var contentID = el.closest('tr').getAttribute('data-content-id');
                }
                let formData = new FormData();

                for (let i = 0; i < files.length; i++) {
                    let file = files[i];
                    formData.append('image_field[]', file, contentID + '___' + file.name);
                }
                /* Original working */
                fetch(url, {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.text())
                .then(data => {
                    if (button.classList.contains('hidden')) {
                        loadingGifEl.classList.add('hidden');
                        button.classList.remove('hidden');
                    }
                    if(Number.isInteger(parseInt(data)) != true)
                        alert('Erro ao inserir na base de dados');

                    console.log(data);
                })
                .catch(function(error){
                    if (button.classList.contains('hidden')) {
                        loadingGifEl.classList.add('hidden');
                        button.classList.remove('hidden');
                    }
                    alert('Erro em fazer upload');
                    console.log(error);
                });
            });
        });
    }
}