jQuery .click() 事件无效。两个中的一个在工作,另一个不工作
jQuery .click() event not working. Out of two one is working the other does not
$('.like-btn').click((e) => {
e.target.classList = 'like-unlike-btn unlike-btn far fa-heart';
});
$('.unlike-btn').click((e) => {
e.target.classList = 'like-unlike-btn like-btn far fa-heart';
});
.like-unlike-btn {
color: #fb3958;
font-size: 2rem;
position: absolute;
top: 0;
left: 10px;
cursor: pointer;
}
.like-unlike-btn:hover {
color: rgb(252, 11, 11);
}
.unlike-btn {
font-weight: bold;
}
.like-btn {
font-weight: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<i class="like-unlike-btn like-btn far fa-heart"></i>
为什么我的代码不起作用?
第一个点击事件工作正常,但第二个不工作
请建议其他一些方法。
您可以将事件附加到主事件 class like-unlike-btn
并改用 toggleClass
:
$('.like-unlike-btn').on('click', function(e) {
$(this).toggleClass('unlike-btn like-btn');
});
.like-unlike-btn {
color: gray;
font-size: 2rem;
position: absolute;
top: 0;
left: 10px;
cursor: pointer;
}
.like-unlike-btn:hover {
color: red !important;
}
.like-btn {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<i class="like-unlike-btn like-btn far fa-heart"></i>
$('.like-btn').click((e) => {
e.target.classList = 'like-unlike-btn unlike-btn far fa-heart';
});
$('.unlike-btn').click((e) => {
e.target.classList = 'like-unlike-btn like-btn far fa-heart';
});
.like-unlike-btn {
color: #fb3958;
font-size: 2rem;
position: absolute;
top: 0;
left: 10px;
cursor: pointer;
}
.like-unlike-btn:hover {
color: rgb(252, 11, 11);
}
.unlike-btn {
font-weight: bold;
}
.like-btn {
font-weight: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<i class="like-unlike-btn like-btn far fa-heart"></i>
为什么我的代码不起作用? 第一个点击事件工作正常,但第二个不工作 请建议其他一些方法。
您可以将事件附加到主事件 class like-unlike-btn
并改用 toggleClass
:
$('.like-unlike-btn').on('click', function(e) {
$(this).toggleClass('unlike-btn like-btn');
});
.like-unlike-btn {
color: gray;
font-size: 2rem;
position: absolute;
top: 0;
left: 10px;
cursor: pointer;
}
.like-unlike-btn:hover {
color: red !important;
}
.like-btn {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<i class="like-unlike-btn like-btn far fa-heart"></i>