时间戳

首页 > 解决方案 > 简单的 If else on count - 显示不同的 h5

javascript - 简单的 If else on count - 显示不同的 h5

问题描述

我试图根据计数的值显示两个不同的代码位。

例如，如果计数等于 1，我想显示此代码：

<h5>person has visited</h5>

如果更多，我想展示

<h5>people have visited</h5>

这是我当前的代码：

<h5 class="visitor-count count">{{ $place->visitors->count()}}</h5>
<h5 class="visitor-count count-text">people have visited</h5>

$('.visit').on('click', function(event){
    event.preventDefault();
    var buttonToChange = $(this);
    var $this = $(this);

    $.ajax({})
    .done(function() {
        if(buttonToChange.hasClass('btn-visited')){
            buttonToChange.addClass('btn-not-visited');
            buttonToChange.removeClass('btn-visited');
            buttonToChange.html('Visited?');
            count = $this.siblings('.count');
            count.html(parseInt(count.html()) - 1);
        } else {
            buttonToChange.addClass('btn-visited');
            buttonToChange.removeClass('btn-not-visited');
            buttonToChange.html("I've Visited <i class='fas fa-check'>");
            count = $this.siblings('.count');
            count.html(parseInt(count.html()) +1);
        }
    });
});

标签： javascriptjqueryajax

解决方案

我不确定您要在这里做什么，但是：

  • 我根据您的 if/else 中的代码添加了一个按钮
  • 我声明了count未声明的变量。
  • 我硬编码了 2 个以前的访问者，而不是你的 PHP 代码。你将不得不改变它。
  • 我添加了一个简单的 if/else 块来测试计数是否等于 1 并按照您想要的方式更改消息：

例如，如果计数等于 1，我想显示此代码：

<h5>person has visited</h5>

  • 我删除了 $.ajax 调用，因为它没有任何用途。

它的行为方式是否符合您的期望？

$('.visit').on('click', function(event) {
    event.preventDefault();
    var buttonToChange = $(this);
    var $this = $(this);
    var count;

    $.ajax('http://www.google.fr')
        .done(function() {
            if (buttonToChange.hasClass('btn-visited')) {
                buttonToChange.addClass('btn-not-visited');
                buttonToChange.removeClass('btn-visited');
                buttonToChange.html('Visited?');
                count = $this.siblings('.count');
                count.html(parseInt(count.html()) - 1);
            } else {
                buttonToChange.addClass('btn-visited');
                buttonToChange.removeClass('btn-not-visited');
                buttonToChange.html("I've Visited <i class='fas fa-check'>");
                count = $this.siblings('.count');
                count.html(parseInt(count.html()) + 1);
            }

            // simple if / else to change the text in 'count-text' depending on the value of 'count'
            if (parseInt(count.html()) === 1) {
                $(".count-text").html("person has visited");
            } else {
                $(".count-text").html("people has visited");
            }
        });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button type="button" class="visit btn-visited">Visit</button>
<h5 class="visitor-count count">2</h5>
<h5 class="visitor-count count-text">people have visited </h5>

推荐阅读