javascript - jquery 单击不使用 if 条件正确更改文本/数字

Question

我正在用 jquery 编写一个 Like 按钮，但我在条件方面遇到一些问题。

我遇到的另一个问题是total_likes计数器:如果我点击like并点击like，计数器就会设置为0，但如果我再次喜欢，计数器就会变为2而不是1...

php/html:

if (total_likes > 0) {
    $hide = 'block';
} $hide = 'none';

$photos_box .= '<input type="hidden" class="tl' . $imgID . '" value="' . $total_likes . '" />
<a id="' . $imgID . '" class="like_button" title="' . $like_title . '">' . $like . '</a>

//the counter
<a id="" style="display: '. $hide . '">
    <span id="color" class="mod' . $imgID . '">' . $total_likes . '</span>
</a>
// the text
<li id="counter" style="display: ' . $hide . ';">
    <div id="">
        <span class="text_color">' . $text . '</span>
    </div>
</li>

jquery 脚本:

$('.like_button').click(function() {

    var total_likes = $('.tl'+this.id).val();
    total_likes = parseInt(total_likes);

    var status = '';

    if ($(this).html() == 'Like') {
        status = 'like';

        $(this).html('Unlike');
        $(this).attr('title', 'Unlike this');
        $('.mod'+this.id).html(total_likes+1);

        if (total_likes == 0) {
            $('#counter').slideToggle('fast');
            $('.text_color').html('Like this.');
        } else if (total_likes == 1) {
            $('.text_color').html('You and <a id="A_112">other</a> like this.');
        } else if (total_likes > 2) {
            var tl = total_likes+1;
            $('.text_color').html('You and <a id="A_112">'+tl+' others</a> like this.');
        }
    } else if ($(this).html() == 'Unlike') {
        status = 'unlike';

        $(this).html('Like');
        $(this).attr('title', 'Like this');
        $('.mod'+this.id).html(total_likes-1);

        if (total_likes == 0 || total_likes == 1) {
            $('#counter').slideToggle('fast');
        } else if (total_likes == 2) {
            $('.text_color').html('<a id="A_112">1 person</a> like this.');
        } else if (total_likes > 2) {
            var tl = total_likes-1;
            $('.text_color').html('<a id="A_112">'+tl+' people</a> like this.');
        }
    }

    var data = {
        img_id : this.id,
        sta    : status
    };

    $.ajax({
        type : 'POST',
        url  : '/includes/like.php',
        data : data
    }).done(function(result) {
        console.log(result);
    });
});

使用 jquery 和实时更改是一团糟...我不确定条件是否正确，可以满足其需要。

我不知道为什么 like_counter-1 正在做 -2 而 like_counter+1 正在做 +2...

我做错了什么？

Answer 1

您不需要打印两次 $total_likes...只需使用您的实际计数器:

var total_likes = $('.mod'+this.id).html();