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

Question

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

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

在这里您可以看到，如果您按+符号，它会显示其下方的行，而ID为4和5的行则被隐藏，因为未按下该按钮。

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

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

代码:

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 与 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);
                });
            });
        });
    }
}