我试图用jQuery创建一个Like / Different按钮!这就是我做的,
这是HTML,
<span class="like-button">{% if request.user in likes.all %}Unlike{% else %}Like{% endif %}</span>
这里是jQuery,
$('.like-button').click(function(){
var x = $(this);
x.toggleClass('like-button');
if(x.hasClass('like-button')){
x.text('Like');
} else {
x.text('Unlike');
}
});
当我按下Like
按钮时,它可以正常工作文字更改为Unlike
,但问题是在我按Unlike
按钮后刷新网页时需要点击2次才能转回Like
。我们如何解决它还是有其他更好的方法来做到这一点吗?
谢谢你:)
答案 0 :(得分:0)
您可能希望班级也是有条件的
String Date = new SimpleDateFormat("dd-MMM-yyyy").format(new Date());
//to get current date
String Time = new SimpleDateFormat("hh:mm a").format(new Date());
//to get current time
String DeliveryDate=deliveryDate.getText().toString();
if (Date.equals(DeliveryDate)) {
//comparing current date and delivery date,delivery date choosen from calendar
if (deliveryTimeText.compareTo(currentTime) < 3)
{
showToast("Sorry! Delivery Time is less by 1 hour. Cannot place order");
}
}
答案 1 :(得分:0)
问题是第二次加载页面时,该按钮在元素上也有like-button
类。因此,当您单击时,它会将其删除(无论文本是什么)并将文本更改为“不同”(再次)。这就是为什么你需要一个不同的标识符。
我建议你在你的元素或id中添加第二个类来获取元素。
Here's a fiddle(在这个例子中,我显示两个按钮,在第一次加载时显示一个,在刷新页面上显示一个(没有类))。
例如:
HTML
<span id="btn-like" class="like">{% if request.user in likes.all %}Unlike{% else %}Like{% endif %}</span>
刷新时的HTML(注意没有类似的类)
<span id="btn-like">{% if request.user in likes.all %}Unlike{% else %}Like{% endif %}</span>
JAVASCRIPT
$('#btn-like').click(function(){
var x = $(this);
x.toggleClass('like');
if(x.hasClass('like')){
x.text('Like');
} else {
x.text('Unlike');
}
});
答案 2 :(得分:0)
对该按钮使用Id
并在该ID上绑定点击事件,如果文字已经.like-button
Unlink
的jQuery
$('#button').click(function() {
var x = $(this);
x.toggleClass('like-button');
if (x.hasClass('like-button')) {
x.text('Like');
} else {
x.text('Unlike');
}
});
HTML
<span {% if request.user in likes.all %}class="like-button" {% endif %} id="button">{% if request.user in likes.all %}Unlike{% else %}Like{% endif %}</span>