0

これについて質問しましたが、投稿が混乱に陥り、問題の要点が失われました。基本的に、「好き」または「好きではない」リンクがデータベースを更新し、ページを更新しなくても新しいステータスを表示するように ajax をセットアップしようとしています。

だから私はPHPループによって生成されたリンクを含む「view.php」ページを持っています。それらは次のようになります。

<div class="tools">
<a href="processor.php?c=cars&p=2&s=d&u=i&pid=999999990" title="Click to LIKE this photo" class="like do_like">like</a>
</div>

<div class="tools">
<a href="processor.php?c=cars&p=2&s=d&u=d&pid=999999991" title="Click to UNLIKE this photo" class="like do_unlike">unlike</a>
</div>

各リンクには 2 つのクラスがあることに注意してください。最初は「like」クラス、次に「do_like」クラスまたは「do_unlike」クラスのいずれかです。これは、それぞれ「like」へのリンクか「unlike」へのリンクかによって決まります。(元々、css を介してリンクをロールオーバー タイプの画像/アイコンに変換するために使用していた「do_like」クラスと「do_unlike」クラスしかありませんでしたが、ajax 用に「like」クラスも追加しました。下。）

ユーザーがこれらのリンクの 1 つをクリックすると、受信側の processor.php スクリプトがクエリ文字列から変数と値のペアを取得し、それらを使用してデータベースを更新し、新しい形式のリンクを作成してエコーします。リンクの新しい形式は、「いいね」リンクが「これとは違う」リンクに変わり、その逆も同様です。したがって、上記の最初の「いいね」リンクに対して、データベースは次を返します。

processor.php?c=cars&p=2&s=d&u=d&pid=999999990

processor.php ページが「いいね」(u=i) の場合にデータベースにデータを挿入するか、データベースからデータを削除するかを決定するのは、クエリ文字列の「u」変数です。 「似ていない」(u=d) の場合。(データベースの挿入/削除に準備済みの PDO ステートメントを使用しています。)

私は jquery/ajax を使用して、ページを更新することなく、クリックされたリンクの代わりにこの新しく作成されたリンクを挿入しています。

これを行うために、「view.php」ページに jquery.js を含め、次の JavaScript 関数を使用しました。

<script type="text/javascript">
$(function() {
$("a.like").click(function(e){
    e.preventDefault();
    var link = $(this);
    $.get(
        $(this).attr('href'),
        function(data){
            link.attr('href',data);
    });
});
});
</script>

問題は、この関数はデータを処理スクリプトに送信しても問題ありませんが、ページを更新せずにページ内のリンクの href 属性を変更します (クリック後にブラウザーでリンクをコピーすると、この問題が発生していることがわかります)。リンクのテキスト、クラス、またはタイトルは変更されません。したがって、リンクが実際に変更されたという視覚的な合図を確認するには、ページを更新する必要があります (processor.php ページでヘッダーのリダイレクトを使用することもできます)。

リンクのテキスト、クラス、およびタイトルも置き換えるように、関数を変更 (または変更) するにはどうすればよいですか? そのため（たとえば、「いいね」リンクを変換する）：

<a href="processor.php?c=cars&p=2&s=d&u=i&pid=999999990" title="Click to LIKE this photo" class="like do_like">like</a>

になります：

<a href="processor.php?c=cars&p=2&s=d&u=d&pid=999999990" title="Click to UNLIKE this photo" class="like do_unlike">unlike</a>

?

4

3 に答える 3

0

if条件を使用して、現在の状態を確認し、属性を更新します。

$(function () {

    $("a.like").click(function (e) {
        e.preventDefault();
        var link = $(this);           
        var alreadyLiked = (link.text() == "UnLike") ? true : false;            
        $.get(link.attr('href'), function (data) {
        link.attr('href', data);
        if (alreadyLiked) {
            link.removeClass("do_unlike").addClass("do_like").text("Like").attr("title", "Click to LIKE this photo");

        }
        else {
            link.removeClass("do_like").addClass("do_unlike").text("UnLike").attr("title", "Click to UN LIKE this photo");
        }
        alreadyLiked = !alreadyLiked;           
    });

    });
});

このコードは機能します。テスト済み。getリクエストが（削除/挿入用の）URLを正しく提供するたびに仮定します。

于 2012-05-29T21:34:16.467 に答える
0

クラスとタイトルも変更する必要があります。

[...]
$.get(
    $(this).attr('href'),
    function(data){
        link.attr('href',data);
        link.toggleClass('do_like do_unlike');
        link..attr('title', 'change title here');
});
于 2012-05-29T21:39:31.613 に答える
0

これは、Shyju と Pitchinnate の両方の応答に基づいており (両方のおかげです!)、css ロールオーバー リンク変換メソッドを使用してうまく機能します (フェード効果も含めました)。

<script type="text/javascript">
$(function() {
$("a.like").click(function(e){
    e.preventDefault();
    var link = $(this);
    $.get(
        $(this).attr('href'),
        function(data){
            link.attr('href',data);
            link.toggleClass('do_like do_unlike');

var titleState=(link.attr("title") == "Click to LIKE this photo") ? "no" : "yes";
if(titleState=="yes")
    {
    link.attr('title', 'Click to LIKE this photo');
    }
    else
    {
    link.attr('title', 'Click to UNLIKE this photo');
    }

    });

$(this).parents('div.tools').fadeOut(1000);
$(this).parents('div.tools').fadeIn('slow');

});
});
</script>
于 2012-05-30T00:08:52.713 に答える