在click更改data-visible值之后，我無法選擇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>
我該如何解決這個問題？
演示在這里
uj5u.com熱心網友回復：
您寧愿將 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>uj5u.com熱心網友回復：
該元素尚不存在
當您為#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
uj5u.com熱心網友回復：
$('#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 以添加除顯示和隱藏之外的更多值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/396445.html
標籤：javascript 查询
上一篇：將陣列物件與元素的文本匹配