0

大学のウェブサイトのサイドバーに表示される簡単な投票用のものを作成しています。仕組みは簡単です。好きな人を選んで、それで終わりです。以下のような構成になっています。があり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';
}
?>
4

3 に答える 3

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 に答える
0

これを試して-

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

ライブデモ

于 2013-08-26T08:19:37.610 に答える