用戶爲候選人投票後刪除所有其他'投票'鏈接

我正在構建一個簡單的投票事項，它會出現在大學網站的邊欄中。它的工作方式很簡單。你挑選你喜歡的人就是這樣。它的結構如下。有一個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

用戶爲候選人投票後刪除所有其他'投票'鏈接

回答

相關問題