javascript - 两次点击 html/jQuery 注册

Question

我打印了几次具有不同 id 的 HTML 部分代码（${element.id}在每个部分中它们都是不同的）。现在第一个子元素可以正常工作，但其他子元素会单击两次（单击一次后它的淡入和淡出）。我想删除这个错误。我使用 Laravel 作为主要框架。对不起我的英语:) 提前谢谢！

<div class="notification warning closeable" id="checkbox-area">
<input type="checkbox" name="blocks[]" class="form-check-input" id="element${element.id}" value="${element.url}" checked>
<label class="form-check-label" for="element${element.id}">${element.name}
<img src="${window.location.origin}/${element.thumbnail}" id="original" class="imgBlocks">

</label>
<button class="dropbtn" data-id="${element.id}" type="button">...</button>
</div>
<div class="drop-down" id="drop_${element.id}">
<div id="text-generation" class="drop-down-text">
</div>
<button type="button" id="btn-text-updater">new text</button>
</div>

const textGen = document.getElementById('text-generation');
        const btnUpdateTextGen = document.getElementById('btn-text-updater');
        let countTextRefresh = 0;

$(dotsBtn).click(function (e) {
    e.preventDefault();

    let id = $(this).attr("data-id")

    if ( $("#drop_"+id).is(":visible") ) {
        $("#drop_"+id).fadeOut(1000);
    } else {
        $("#drop_"+id).fadeIn(1000);
    }

})

标签： javascripthtmljquerycsslaravel

Answer 1

你应该改变：

    if ( $("#drop_"+id).is(":visible") ) {
        $("#drop_"+id).fadeOut(1000);
    } else {
        $("#drop_"+id).fadeIn(1000);
    }

至

    if ( $("#drop_"+id).is(":visible") ) {
        $("#drop_"+id).fadeOut(1000);
        return;
    }
        $("#drop_"+id).fadeIn(1000);