ベストセラー人気 WordPress テーマTop 30 詳細

クリック時に特定のリスト項目を先頭に移動させる(jQuery)

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

例えば、次のようなリストがあるときにクリック時に特定の項目(例えば桃とスイカ)を先頭に配置して、もう一度クリックすると元に戻りさせたい場合に使用できるjQueryのコードです:

  1. 사과
  2. 桃*
  3. スイカ*
  4. バナナ

jQuery:

$('.featuredon').show();
$('.featuredoff').hide();
$('.featuredcomments').click(function(){
var $ul = $(this).next('ol');
if(!$ul.data('sorted')){
$ul.data('original', $ul.html());
$ul.data('sorted', true);
$ul.prepend($ul.find('li.featured'));
$('.featuredon').hide();
$('.featuredoff').show();
} else {
$ul.data('sorted', false);
$ul.html($ul.data('original'));
$('.featuredon').show();
$('.featuredoff').hide();
}
});

次のコードは、ロード時に「featured 'クラスを持つエントリがソートされます。

$(document).ready(function () {
sort = function(_this){
var $ul = $(_this).next('ol');
if(!$ul.data('sorted')){
$ul.data('original', $ul.html());
$ul.data('sorted', true);
$ul.prepend($ul.find('li.featured'));
$('.featuredon').hide();
$('.featuredoff').show();

} else {
$ul.data('sorted', false);
$ul.html($ul.data('original'));
$('.featuredon').show();
$('.featuredoff').hide();
}
}

$('.featuredon').show();
$('.featuredoff').hide();
sort($('.featuredcomments'));

$('.featuredcomments').click(function(){
sort($(this));
});
});

このコードを利用して、お知らせや、特定のクラスのアイテムが常に上に表示されるようにすることができます。 たとえば、この WordPress ブログでコメントのうち、管理者が指定した特定のコメント(特定のクラスを追加するプラグインを使用してバックエンドでクラスの追加が可能)このページ/記事の読み込み時に、常に一番上に表示されます。
Featured comments using jQuery in WordPress
上の図で入れ子にされ、最初のコメントがコメントの作成時期にかかわらず、常に一番上に表示されます。 「Featuredコメントの先頭」をクリックして、チェックを外すと元の位置に戻ります。



コメントを残す

コメント