2011-08-01 24 views
1

Jquery Show/Hideを実装しようとしているので、別のページにリンクせずに展開するセクションをもっと読みたいと思います。PHPでforeachループを使用してJqueryを非表示/表示する方法

拡大すべきデータがPHPのforeachループから来ていると、コンテンツが私が午前の問題は、私はをクリックすることで、十分な

長い場合、私はHTMLマークアップを追加する機能を作成しましたもう一つのリンクを読むと、それらはすべて展開され、ブラウザの必要なところからページの上部にスクロールします。

この作業は、クリックされたリンクに対してのみ行うことができます。 PHPの変数をJqueryに追加する方法はありますか?

HTMLの頭の中でjQueryのスクリプト

<script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

$('name#read').hide(); 
$('a#read_more').click(function(){ 
$('name#read').slideDown('slow');    
}); 
$('a#read_less').click(function(){ 
$('name#read').slideUp('slow'); 
}); 
}); 
</script> 

PHP関数

function read_more($content){ 

if (strlen($content) < 150){ 
    return $content; 
} else { 
    $content = substr($content,0,150) . "......<a href='#' id='read_more'>read more</a>" . "<a name id='read'>" . substr($content,150) . "</a>"; 
    return $content; 
} 

} 

答えて

1

あなたが探していることはこれです:あなたのクリックハンドラ内http://api.jquery.com/event.stopPropagation/するevent.stopPropagation()を使っているので同じページにとどまる

複数のショーについては、ユニークなIDを生成していない可能性が高いです! htmlタグにdata- *属性を持つか、aタグに一意のIDを追加します。

$('a.readMore').click(function() { 
    event.stopPropagation(); 
    var data_id = $(this).data('contentId'); 
    $('#'+data_id).show(); //or fadeIn or slideUp/Down... 
} 

あなたのHTMLは、このようなものになるだろう:このような何か作業をする必要があり

<a href="#" class="readMore" data-contentId="1">...read more</a> 
<div id="1">My Content to show goes here</div> 

はdiv要素である必要はありませんが、あなたは私が得る...

+0

あーのおかげでアイデアを得ますそれ!データベースに自動インクリメントをHTMLに割り当てて、HTML属性の値として取得することができます。 – user866190

関連する問題