单击ajax时替换按钮颜色

Question

我在页面上有一个像按钮。当我点击像按钮它会改变按钮的颜色。我的问题是我点击按钮后，重新加载页面颜色回到它的默认颜色。我用阿贾克斯提出要求，这工作正常。我得到的唯一问题是当我重新加载页面的按钮回到其默认颜色，这是按钮的颜色，如果使用没有按下按钮像...

这是我迄今为止尝试..我无法弄清楚如何解决这个....

like.html

<div class="controls"> 
    <span><a href="#ignore" style="text-decoration: none;"><i class="fa fa-heart"></i>&nbsp;Like&nbsp;</a></span> 
    <span><a href="#ignore" style="text-decoration: none;"><i class="fa fa-comment"></i>&nbsp;Comment&nbsp;</a></span> 
    <span><a href="#ignore" style="text-decoration: none;"><i class="fa fa-share-alt"></i>&nbsp;Spread&nbsp;</a></span> 
    <span class="pull-right" style="font-weight: normal;"><a href="#ignore">View <span id="comment_count">863</span> previous comment</a></span> 
    </div> 
    <!-- //Notice .info-users class--> 
    <div class="info-users"> 
    <strong>Anthousa Deshayes, Mariano Wall</strong> and <strong>240 others</strong> 
    like this. 
    </div> 

ajax.js

$.ajax({ 
    type:'POST', 
    url:'../../../ajax/carousel/getcarousel_likes.php', 
    dataType:'JSON', 
    data:{ 
     carousel_id: videoID, 
     user_id: user_id 
    }, 
    success: function(result){ 

     for (var i = 0; i < result.length; i++) { 

      var $htmlObjectLike = $($.parseHTML($.ajax({ 
       type:'GET', 
       url:'../../../htmlstrings/like.html', 
       cache:false, 
       async:false 
      }).responseText)); 



     $tbl = $htmlObjectLike.find('div.controls').attr('data-likes', (result[i]) ? result[i]: '').css('color', (result[i].from_user_id) ? '#59960b' : ''); 
      $htmlObjectLike.find('div.info-users').html(
        (((result[i].from_user_id > 0) ? '<strong>You</strong>' : '') + 
        ((result[i] > 0) ? ' and <strong>' + result[i] + ' people</strong>': '') + 
        ((result[i].from_user_id || (result[i].from_user_id) > 0) ? ' like this' : '')).replace(/^(and)/,"") 
       ); 
     } 
    } 
}); 

getcarousel_likes.php

<?php 

    require_once '../../config/database.php'; 
    require_once '../../includes/dboperations/carousel.php'; 

    $database = new Database(); 
    $conn = $database->getConnection(); 
    $comment = new carousel($conn); 

    if (is_ajax()) { 
     if (isset($_POST)) { 
      $carousel_id = $_POST['carousel_id']; 
      $user_id = $_POST['user_id']; 
      $result = $comment->didYouLike($carousel_id,$user_id); 
      echo json_encode($result); 
      // echo $time; 
     } 
    } 

    function is_ajax() { 
     return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'; 
    } 

    ?> 

，这是我为我的数据库查询..

public function didYouLike($carouselid,$user_id) 
{ 
    $sql = "SELECT * FROM tbl_carousel_like WHERE carousel_id = '$carouselid' AND from_user_id = '$user_id'"; 
    $select = $this->dbh->prepare($sql); 
    $select->execute(); 
    $data = $select->fetchAll(PDO::FETCH_ASSOC); 
    return $data; 
} 

Answer 1

$.ajax({ 
    type:'POST', 
    url:'../../../ajax/carousel/getcarousel_likes.php', 
    dataType:'JSON', 
    data:{ 
     carousel_id: videoID, 
     user_id: user_id 
    }, 
    success: function(result){ 

     for (var i = 0; i < result.length; i++) { 

     $('div.controls span:first a').attr('data-likes', (result[i].like_id) ? result[i].like_id : '').css('color', (result[i].from_user_id) ? '#59960b' : ''); 

      $('div.info-users').html(
        (((result[i].from_user_id > 0) ? '<strong>You</strong>' : '') + 
        ((result[i].from_user_id > 0) ? ' and <strong>' + result[i].like_id + ' people</strong>': '') + 
        ((result[i].from_user_id || (result[i].from_user_id) > 0) ? ' like this' : '')).replace(/^(and)/,"") 
       ); 
     } 
    } 
}); 

不使用/添加任何插件我实现我want..thanks通过由其他用户提供的答案的方式。

Answer 2

你可以使用Cookie来存储这些信息。

if (x == 'true') { 
 
    document.body.style.backgroundColor = "red"; 
 
} 
 
document.getElementById('button').onclick=function() { 
 
    document.getElementById('button').style.backgroundColor = "red"; 
 
    document.cookie = "pressed=true"; 
 
}; 
 
function getCookie(name) { 
 
    var value = "; " + document.cookie; 
 
    var parts = value.split("; " + name + "="); 
 
    if (parts.length == 2) return parts.pop().split(";").shift(); 
 
} 
 
var x = getCookie('pressed');

<button id="button" onclick="change();">Click Me</button>