jQuery 數據屬性選擇器在單擊時不起作用

Question

click並更改data-visible值后，我不能 select data-visible值具有新值。

JS：

$('#imageUploadAction').on('click', function(e) {
 $('#imageUploadAction').html('Close');
 $('.image-upload-action').toggleClass('h-100 show');
 $('#imageUploadAction').attr('data-visible', 'show');
 $('.image-upload-action-btn').removeClass('d-none');
 $('.image-upload-action-btn').addClass('d-block');
});
$('#imageUploadAction[data-visible="show"]').on('click', function(e) {
 console.log('ok');
});

HTML：

<div class="image-upload-action d-flex align-items-center flex-column">
  <a id="imageUploadAction" href="javascript:void(0)" data-visible="hide">edit</a>
  <div class="image-upload-action-btn d-flex justify-content-center align-items-center mt-auto d-block">
    data
  </div>
</div>

我該如何解決這個問題？

在這里演示

Answer 1

您寧願將 data-visible 的值放在字符串中並用 if 檢查

 $('#imageUploadAction').on('click', function(e) { let getStatut = $(this).attr('data-visible'); console.clear(); console.log(getStatut); if (getStatut == "hide") { $(this).html('Close').attr('data-visible', 'show'); $(this).parent('.image-upload-action').toggleClass('h-100 show'); $(this).next('.image-upload-action-btn').removeClass('d-none').addClass('d-block'); } else { // show $(this).html('Open').attr('data-visible', 'hide'); $(this).parent('.image-upload-action').toggleClass('h-100 hide'); $(this).next('.image-upload-action-btn').removeClass('d-block').addClass('d-none'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image-upload-action d-flex align-items-center flex-column"> <a id="imageUploadAction" href="javascript:void(0)" data-visible="hide">edit</a> <div class="image-upload-action-btn d-flex justify-content-center align-items-center mt-auto d-block"> data </div> </div>

Answer 2

該元素尚不存在

在您為#imageUploadAction[data-visible="show"]添加點擊處理程序時，不存在具有此選擇器的元素。

使用它來將點擊處理程序綁定到.image-upload-action以及任何帶有選擇器的未來元素：

$('.image-upload-action').on('click', '#imageUploadAction[data-visible="show"]', function(e) {
 console.log('ok');
});

請參閱此處的 jQuery 文檔：
https://api.jquery.com/on/#on-events-selector-data

Answer 3

$('#imageUploadAction').on('click', function() {
    if($(this).data('visible') === 'show') {
        console.log('data visible is show');
        $(this).html('Edit').data('visible', 'hide');
    } else {
        console.log('data visible is hide');
        $(this).html('Close').data('visible', 'show');
    }
    $('.image-upload-action').toggleClass('h-100 show');
    $('.image-upload-action-btn').toggleClass('d-block d-none');
});

我假設您在編輯和關閉之間切換操作。 我使用jQuery 數據簡化了您的代碼和處理數據屬性，並在公共選擇器上鏈接了多個 jquery 方法。 您可以替換它並檢查您的 jsFiddle。 擁有多個點擊處理程序並不理想，因此只需使用一個並檢查屬性的值並根據它做出決定。 您可以添加 else if 添加除顯示和隱藏之外的更多值。