0

Wordpressの投稿にjQueryアニメーションを追加しようとしています。

アニメーションは正常に機能しますが、難しいのは、個々の投稿ごとにどのようにアニメーションを作成するかです。つまり、各投稿には個別のID（eg post-xxxx）が割り当てられ、投稿ID（私が知っている）を知る唯一の方法はWordpressのthe_ID()機能を使用することです。

インデックスPHPファイルのスクリプトタグでjQueryを実行しています。どうすればこれを行うことができますか？私の唯一の良いアイデアは、投稿のタグにonclickHTMLリスナーを追加し、jQueryコードで参照を使用することでしたが、実行されませんでした（コードが間違っているかどうかはわかりません）。DIVthis

これが私が試したもののコードです：

<script>
    function('test') {
        $(this).animate({
            height: '+=350'
        }, {
            duration: 500
        });

        $('.review-thumb').animate({
            opacity: 0
        }, {
            duration: 500
        });
    },
</script>

これが私のHTMLタグです：

<div onclick="test" class="post number-<?php echo $number; ?> colour-<?php echo $colour; ?>" id="post-<?php the_ID(); ?>">

ウェブサイトのテーマはhttp://vusavusa.com/blog/?theme=vusavusa2にあります。今、コンテンツの乱雑さをお許しください。

4

2 に答える 2

2

post-すべての投稿が識別子で始まると仮定すると、このようなことができます。以下のセレクターは、idで始まる を持つすべての入力を取得しpost-ます。

$('input[id^="post-"]').animate({ height: '+=350' }, { duration: 500 });

この概念は、次のような何をしようとしても適応できます。

/** Assign an animation to each element */
$('input[id^="post-"]').click(function() {
    $(this).animate({ height: '+=350' }, { duration: 500 });
    return false;
});

もう 1 つのオプションは、アニメーション化してフル ビューslideToggleに拡張することです。Postフル ビューはプリロードされますが、デフォルトでは非表示であり、クラスはpost-full.

CSS:

.post-full { display: none; }

JS:

$(function() { 
    $('[id^="post-"]').click(function() {
        $(this).find('.post-full').slideToggle(500, function(){});
        return false;
    });
});
于 2013-02-04T23:54:52.253 に答える
0

クラス（「postClass」など）を追加して使用してみませんか $('.postClass')

于 2013-02-04T23:52:21.067 に答える