喜欢/不同于使用jQuery的Button

时间:2018-03-17 04:31:08

标签: javascript jquery django

我试图用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。我们如何解决它还是有其他更好的方法来做到这一点吗?

谢谢你:)

3 个答案:

答案 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>