我有一個訂閱使用者個人資料按鈕，只有當我單擊 rss font Awesome 圖示時才起作用，而按鈕的其餘部分則不起作用。我嘗試了幾次重寫，將按鈕元素設為單擊事件，但它們根本不起作用。
以下程式碼僅在點擊圖示元素時起作用：
<button class='subscribe-button profile-subscribe'>
<?php if ($profile->userSubscribed): ?>
<i class="fa-solid fa-user-check subscribe" data-user='<?= esc($profile->username);?>'></i>Subscribed
<?php else: ?>
<i class="fa-solid fa-rss subscribe" data-user='<?= esc($profile->username);?>'>
</i> Subscribe
<?php endif ?>
</button>
<script>
$(document).ready(function() {
var csrfName = "<?= csrf_token(); ?>";
var csrfHash = "<?= csrf_hash(); ?>";
// If user clicks the subscribe button
$(".subscribe").on("click", function () {
var userProfile = $(this).data("user");
$clicked_btn = $(this);
if ($clicked_btn.hasClass("fa-solid fa-rss")) {
action = "subscribe";
} else if ($clicked_btn.hasClass("fa-solid fa-user-check")) {
action = "unsubscribe";
}
$.ajax ({
url: "<?= base_url(); ?>/users/members/view_profile/<?= $profile->username;?>",
type: "post",
dataType: "json",
data: {
[csrfName]: csrfHash,
"action": action,
"user_profile": userProfile,
},
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
success: function(data) {
var res = data;
csrfName = res.csrfName;
csrfHash = res.csrfHash;
if (action == "subscribe") {
$clicked_btn.removeClass("fa-solid fa-rss");
$clicked_btn.addClass("fa-solid fa-user-check");
} else if (action == "unsubscribe") {
$clicked_btn.removeClass("fa-solid fa-user-check");
$clicked_btn.addClass("fa-solid fa-rss");
}
}
});
});
});
</script>
這是讓整個按鈕可點擊的一種嘗試：
<button class='subscribe-button profile-subscribe subscribe' id='<?= esc($profile->username); ?>'>
<i class="fa-solid fa-rss"></i> Subscribe
</button>
<script>
$(document).ready(function() {
var csrfName = "<?= csrf_token(); ?>";
var csrfHash = "<?= csrf_hash(); ?>";
// If user clicks the subscribe button
$(".subscribe").on("click", function (event) {
var userProfile = this.id;
$clicked_btn = $(this);
if ($clicked_btn.hasClass("fa-solid fa-rss")) {
action = "subscribe";
} else if ($clicked_btn.hasClass("fa-solid fa-user-check")) {
action = "unsubscribe";
}
$.ajax ({
url: "<?= base_url(); ?>/users/members/view_profile/<?= $profile->username;?>",
type: "post",
dataType: "json",
data: {
[csrfName]: csrfHash,
"action": action,
"user_profile": userProfile,
},
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
success: function(data) {
var res = data;
csrfName = res.csrfName;
csrfHash = res.csrfHash;
if ($('.subscribe').hasClass('subscribed')) {
$('.subscribe').removeClass('subscribed');
$('.subscribe').html('<i class="fa-solid fa-rss"</i>Subscribe');
} else {
$('.like').addClass('subscribed');
$('.like').html('<i class="fa-solid fa-user-check">Subscribed');
}
}
});
});
});
</script>
您的想法是正確的，更改您的點擊處理程序以選擇按鈕而不是圖標，但您錯過了之後的步驟，該步驟正在更改您檢測單擊的是“訂閱”還是“取消訂閱”的方式。當您按一下處理程序位於圖示上時，該類別直接位於已點擊的元素上，但是當您變更為父按鈕時，您必須向下選擇按鈕的子級以查看圖示上的類別以確定它是否是「訂閱」 」或「取消訂閱」。這應該是一個簡單的修復：
$clicked_btn = $(this); let $icon = $clicked_btn.find('i').first(); if ($icon.hasClass("fa-solid fa-rss")) { action = "subscribe"; } else if ($icon.hasClass("fa-solid fa-user-check")) { action = "unsubscribe"; }