0

I'm building a simple voting thingy that'll appear in the sidebar of a college's website. The way it work's is simple. You pick who you like and that's it. It's structured like below. There's a heading, sub-heading and then candidates. Next to each candidate is the like link.

I'm stuck here: When a user clicks a like link, if what happens in demo.php is successful, then all the other like links for that sub-heading need to be taken out, so the user cannot vote for anyone else under that sub-heading anymore.

How can something like this be done when it's all built this way. If the </div> of id=h2 were moved below all the like, it'll make thing easier I feel.

I'm willing to implement changes since this is just being built.

Here's my 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>

Here's demo.php (nothing much in here for now)

<?php

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

3 回答 3

0

尝试这个-

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

现场演示

于 2013-08-26T08:19:37.610 回答
0

第一：身份证重复无效！你的 h2 和 h3s 应该是类

第二：将您的.click功能更改为on()

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

在您的点击功能结束时，请执行以下操作：

$(this).parent().parent().children('.like').off();
于 2013-08-26T07:55:18.637 回答
0

这很简单，你只需要有一个类可以回到“树上”，然后再次向下钻取。

例如，让我们稍微重构一下您的 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-26T07:57:03.340 回答