我有一个订阅用户个人资料按钮，仅当我单击 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"; }