我創建了一個在運行時創建的動態鏈接，當我點擊鏈接時它會改變顏色。但是當我點擊任何其他鏈接時，它也會更改第一個鏈接而不是我點擊的那個鏈接。
我的代碼：
@foreach (var item in Model)
{
<div class="contact-save">
<a href="#" class="phone_number" id="favorite"onclick="Fav(@item.id)" >
<i class="fas fa-heart"></i>
</div>
}
<script>
var btnvar = document.getElementById('favorite')
function Fav(id) {
var url = '@Url.Action("ajaxRent", "Home")';
if(btnvar.style.color == "red"){
btnvar.style.color = "grey"
}
else{
btnvar.style.color = "red"
}
debugger
$.ajax({
url: url,
type: 'POST',
data: {
id: id
},
success: function (data) {
if(data.length == 0) // No errors
alert("Fave success!");
},
error: function (jqXHR) { // Http Status is not 200
},
complete: function (jqXHR, status) { // Whether success or error it enters here
}
});
};
</script>
uj5u.com熱心網友回復：
用以下代碼替換您的代碼：
@foreach (var item in Model)
{
<div class="contact-save">
<a href="#" class="phone_number" id="favorite"onclick="Fav(this)" >
<i class="fas fa-heart"></i>
</div>
}
<script>
function Fav(x) {
var url = '@Url.Action("ajaxRent", "Home")';
if(x.firstElementChild.style.color == "red"){
x.firstElementChild.style.color = "grey"
}
else{
x.firstElementChild.style.color = "red"
}
debugger
$.ajax({
url: url,
type: 'POST',
data: {
id: x.id
},
success: function (data) {
if(data.length == 0) // No errors
alert("Fave success!");
},
error: function (jqXHR) { // Http Status is not 200
},
complete: function (jqXHR, status) { // Whether success or error it enters here
}
});
};
</script>
重要說明： 如果電話號碼錨標簽重復，則每次都使用唯一 ID。
如果您有任何問題，請告訴我。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534754.html