用于像系统的Javascript

我有一个新闻源并为它创建了一个类似的系统。我有以下代码为我的新闻源和喜欢网页的系统的一部分：用于像系统的Javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link href="/local_home.css" rel="stylesheet" type="text/css" /> 
<?php 

include '/head.php'; 
include '/connect.php'; 
include '/general.php'; 

?> 

</head> 

<body> 
<!-- BEGIN: Sticky Header --> 
<div id="top_container"> 
<div id="header_container"> 
    <div id="header"> 
     <a href="website.com" class="grand_button">website</a> 
    </div> 
</div> 
<!-- END: Sticky Header --> 
<div class="feed_selector"> 
<ul> 
    <li><a href="#">Community</a></li> 
    <li><a href="#">Local</a></li> 
    <li><a href="#">Global</a></li> 
</ul> 
</div> 
</div> 
<!-- BEGIN: Page Content --> 
<div id="container"> 
<div id="content"> 

    <div class="select_box"> 
    Feed Options 

    </div> 
<!--- FEED CONTAINER ---!> 
    <div class="feed_container"> 
    <h1>Local Feed</h1> 
     <div class="hr"></div> 
     <?php 
     $getnews = mysql_query("SELECT * FROM news ORDER BY post_id DESC") or die(mysql_error()); 
     while ($row = mysql_fetch_assoc($getnews)) { 
      $id = $row['post_id']; 
      $title = $row['title']; 
      $body = $row['body']; 
      $date = $row['date']; 
      $likes = $row['post_likes']; 
      ?> 
      <div class="deals"> 
      <div class="title"><?php echo $title ?><a class="like_button" href='#' onclick="like_add(' ,$id, ')">Like</a> 
      <br><?php echo '<span class="like_button" id="post_', $id ,'_likes">', $likes, '</span>'?></div> 
      <br> 
      <?php echo nl2br($body); ?> 
      <br><div class="date_time"><?php echo(time_ago($date)) ?></div> 
      <div class="hr"></div> 
      </div> 

     <?php 
     } 
     ?> 
    </div> 

</div> 
<!-- END: Page Content --> 

<!-- BEGIN: Sticky Footer --> 
<div id="footer_container"> 
<div id="footer"> 
    Footer Content 
</div> 
</div> 
</div> 
<!-- END: Sticky Footer --> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/like.js"></script> 
</body> 
</html>

like.js是用来改变所显示的喜欢的量。它包含两个函数like_add和like_get。

function like_add(post_id){ 
$.post('ajax/like_add.php', {post_id:post_id}, function(data){ 
    if(data === 'success'){ 
     like_get(post_id); 
    }else{ 
     alert(data); 
     } 
}); 
} 

function like_get(post_id){ 
$.post('ajax/like_get.php', {post_id:post_id}, function(data){ 
    $('#article_'+post_id+'_likes').text(data); 
}); 
}

我有like_add和like_get两个AJAX的文件，但我只是呼应了正确的事情，使这两个语句的工作，因为他们应该对它进行测试。

这意味着我的javacript中出现了问题，因为当我点击类似按钮时，数字始终保持为零。我没有收到任何错误或警告，但由于一个奇怪的原因，我无法让JavaScript正常工作。我是JavaScript新手，但逻辑似乎对我来说都是正确的。我没有在第一个代码中正确连接JavaScript吗？

非常感谢！

来源

2013-05-14 RightLeftRight12

这一切真的**完全**你的代码是什么样子？ – Pointy 2013-05-14 00:58:22

其下半部分只包含相同部分。我可以包括整个事情，如果它更容易理解 – RightLeftRight12 2013-05-14 01:00:12

@Pointy整个代码是 – RightLeftRight12 2013-05-14 01:03:25

也许我忽略了的东西，但我会说你的第一个问题是你指定了错误的元素：

你给你喜欢的post_', $id ,'_likes一个ID，然后尝试更新article_'+post_id+'_likes

$('#article_'+post_id+'_likes').text(data);

除了那个，php中的连接就是这样完成的。不，所以我很惊讶这是在工作。像这样的行看起来可疑对我说：

<?php echo '<span class="like_button" id="post_', $id ,'_likes">', $likes, '</span>'?>

为什么不只是这样做：

<span class="like_button" id="post_<?php echo $id; ?>_likes"><?php echo $likes; ?></span>

来源

2013-05-14 01:06:55

啊，我不知道我是如何忽略你发布的第一个问题的。我应该已经发布了，你是对的！但即使在那之后，代码也不能正常工作。这是一个正确的方向！所以，我非常感谢你！ – RightLeftRight12 2013-05-14 01:13:47

当按下类似按钮时，喜欢不会增加，但如果我更改数据库中的喜欢数量，它们会显示正确的喜欢数量 – RightLeftRight12 2013-05-14 01:15:33

我将添加一个console.log（数据）到两个回调函数以确保正确的信息正在退回。如果这些数字是正确的，并且它不更新html，那么这可能是您放置监听器的位置或者将类似输出到屏幕的问题。但首先要确保数据库中的数字正在增加，并且在回调函数中返回正确的数字 – 2013-05-14 01:23:40

不要反对禁用JavaScript的用户歧视！首先，一个简单的形式会做得很好：

<!-- like.php should redirect back --> 
<form action="like.php" method="post" class="like-form"> 
    <input type="hidden" name="post_id" value="<?php echo $id; ?>"> 
    <input type="submit" value="Like"> 
    (<span class="like-counter"><?php echo $likes; ?></span> likes) 
</form>

现在你有一个功能，如果不喜欢华而不实的系统。现在你可能已经注意到了那里的小class="like-form"和class="like-counter"。这是故意的：它使得它非常容易为其编写JavaScript：

$(function() { 
    $('.feed_container').on('click', '.like-form :submit', function(e) { 
     var likeButton = $(this); 
     var postID = likeButton.siblings('[name=post_id]').val(); 
     var likeCounter = likeButton.siblings('.like-counter'); 
     // like-ajax.php should increment the counter and return the new value 
     $.post('like-ajax.php', { post_id: postID }, function(numLikes) { 
      likeCounter.text(numLikes); 
     }); 
     e.preventDefault(); 
    }); 
});

简单！

来源

2013-05-14 01:54:48 icktoofay

用于像系统的Javascript

回答

相关问题