用户为候选人投票后删除所有其他'投票'链接

我正在构建一个简单的投票事项，它会出现在大学网站的边栏中。它的工作方式很简单。你挑选你喜欢的人就是这样。它的结构如下。有一个heading,sub-heading然后candidates。每个candidate旁边是like链接。用户为候选人投票后删除所有其他'投票'链接

我被困在这里：当用户点击一个like链接，如果demo.php发生的事情是成功的，那么所需要的所有其他like链接为sub-heading被取出，因此用户不能别人下投票给任何人那sub-heading了。

这样做是如何做到这一切都是这样构建的。如果将</div>的id=h2移到like以下，它会让我觉得更容易。

由于刚建好，我愿意实施变更。

这里是我的demo.htm

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Side bar voting thingy</title> 

<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $(".like").click(function() { 
     var hasLike = $(this).data("id"); 
     var data = 'id='+hasLike; 
     console.log($(this).data('id')); 

     if(hasLike) { 
      // ajax call 
      $.ajax({ 
       type:"GET", 
       url:"demo.php", 
       data:data, 
       beforeSend:function(html){ 
        // We'll think of something to do here 
       }, 
       success: function(page_data){ 
        // Remove the remaining like links. How? 
        $('.like[data-id="'+page_data+'"]').append(page_data); 
       }, 
       error: function(page_data){ 
        $("#errors").empty(); 
        $("#errors").fadeIn(200); 
        $("#errors").append('Screwed up!'); 
       }, 
      }); 
     } 
     return false; 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="container"> 

    <div id="h1" data-id="1">Teachers</div> 
     <div id="h2" data-id="2">Who is your favorite Math teacher?</div> 
      <div>* Homer Simpson &nbsp <span id="h3" class="like" data-id="3" data-sec="2">Like</span></div> 
      <div>* Elmer Fudd &nbsp  <span id="h3" class="like" data-id="4" data-sec="2">Like</span></div> 
      <div>* Bugs Bunny &nbsp  <span id="h3" class="like" data-id="5" data-sec="2">Like</span></div> 
      <div>* Obelix &nbsp   <span id="h3" class="like" data-id="6" data-sec="2">Like</span></div> 
      <div>* Mojo Jojo &nbsp  <span id="h3" class="like" data-id="7" data-sec="2">Like</span></div> 
     <br> 
    <div id="h1" data-id="8">Restaurants</div> 
     <div id="h2" data-id="9">Which is your favourtie restaurant in town?</div> 
      <div>* McDonalds &nbsp    <span id="h3" class="like" data-id="10" data-sec="9">Like</span></div> 
      <div>* KFC &nbsp     <span id="h3" class="like" data-id="11" data-sec="9">Like</span></div> 
      <div>* The Heart Attack Grill &nbsp <span id="h3" class="like" data-id="12" data-sec="9">Like</span></div> 
      <div>* In-n-Out &nbsp    <span id="h3" class="like" data-id="13" data-sec="9">Like</span></div> 
      <div>* Popeye's &nbsp    <span id="h3" class="like" data-id="14" data-sec="9">Like</span></div> 

    <div id="errors" style="display:none;"></div> 

</div> 

</body> 
</html>

这里的demo.php （没有什么在这里现在）

<?php 

if(isset($_GET['id'])){ 
    echo $_GET['id']; 
} else { 
    echo 'Error! Id not found'; 
} 
?>

来源

2013-08-26 Norman

第一：它是无效的有重复的ID！你的H2和3H公司应该是类

二：在你点击功能结束更改.click功能on()

$(".like").on('click', function() { ... };

做到这一点：

$(this).parent().parent().children('.like').off();

来源

2013-08-26 07:55:18

这很简单，你只需要让一个班级返回“上树”，然后再下钻。

例如，让我们重新构造您的HTML，它不正确的缩进和有点混乱。

<h1 data-id="1">Teachers</h1> 
<div class="sub-heading"> 
    <h2 data-id="2">Who is your favorite Math teacher?</h2> 
    <div>* Homer Simpson &nbsp <span id="h3" class="like" data-id="3" data-sec="2">Like</span></div> 
    <div>* Elmer Fudd &nbsp  <span id="h3" class="like" data-id="4" data-sec="2">Like</span></div> 
    <div>* Bugs Bunny &nbsp  <span id="h3" class="like" data-id="5" data-sec="2">Like</span></div> 
    <div>* Obelix &nbsp   <span id="h3" class="like" data-id="6" data-sec="2">Like</span></div> 
    <div>* Mojo Jojo &nbsp  <span id="h3" class="like" data-id="7" data-sec="2">Like</span></div> 
</div>

上面看起来像一个“清单”对我来说，这样的语义你应该想想交换那些<div>的出去<ul>和一堆<li>的。

既然我们有我们的.sub-heading类容器，它具有这组子元素，它们是一个简单的目标。

$(".like").click(function() { 
    var hasLike = $(this).data("id"); 
    var data = 'id='+hasLike; 
    console.log($(this).data('id')); 
    var $this = $(this); // <-- Set a reference to this element 

    if(hasLike) { 
     // ajax call 
     $.ajax({ 
      type:"GET", 
      url:"demo.php", 
      data:data, 
      beforeSend:function(html){ 
       // We'll think of something to do here 
      }, 
      success: function(page_data){ 
       // Remove the remaining like links. How? 

       $this.closest('.sub-heading').find('.like').remove(); 
       // Notice we're using the reference we set earlier 
       // Then we're going back "up the tree" to the closest .sub-heading 
       // Drilling down again, finding all the .like elements 
       // And simply removing them 

       $('.like[data-id="'+page_data+'"]').append(page_data); 
      }, 
      error: function(page_data){ 
       $("#errors").empty(); 
       $("#errors").fadeIn(200); 
       $("#errors").append('Screwed up!'); 
      }, 
     }); 
    } 
    return false; 
});

来源

2013-08-26 07:57:03 ahren

尝试这个 -

$('.like').click(function() { 
    $('.like').hide(); 
    $(this).show(); 
});

Live Demo

来源

2013-08-26 08:19:37

用户为候选人投票后删除所有其他'投票'链接

回答

相关问题