2

データを出力するためにwhileループを使用しています

   <p><?php echo $title;?></p></font></a><button id=show>show()</button>               <button id=hide>hide()</button>

私のショー非表示機能は

$("#show").click(function () {
   $("p").show('fast');

});

$("#hide").click(function () {
   $("p").hide('fast');
});

 $("#reset").click(function(){
    location.reload();
});

これで、[表示]、[非表示]をクリックすると、最初の[非表示]ループのみが機能し、クリックしたデータだけでなく、すべてのデータが表示/非表示になります。

4

4 に答える 4

6

this次のように、コードを use に変更します。

$(this).prev('p').show('fast');

各 JQuery .click セクションでこれを行う必要があります。

編集：言及されたもう1つの良い点は、要素にIDを使用しているため、これが複数で機能しないことです。新しいマークアップは次のようになります。

<p><?php echo $title;?></p></font></a><button class="show">show()</button>

そしてJQuery：

$(".show").click(function () {
   $(this).prev('p').show('fast');

});
于 2012-10-29T09:08:02.410 に答える
1

SOへようこそ。最初の質問が適切に構成されていることを確認できてうれしいです。

変更したいことはほとんどありません。

ループを通過するときは、必ずループ内でカウンターを使用し、そのカウンターを ID に追加してください。これにより、id が一意の識別子になります。また、それらを div 内にラップします。

 $counter = 0;
 forloop {

    $counter++;
    <div>
    <p><?php echo $title;?></p></font></a><button id="show<?php echo $counter; ?>">show()</button>
    </div>        

 }

したがって、IDは一意になります。これで、以下の方法で jquery を記述できます。

$("button").click(function () {
  $(this).attr('id'); //not required but incase you need the id of the button which was clicked.
  $(this).parent().find("p").show('fast');

});

$("button").click(function () {
   $(this).parent().find("p").hide('fast');
});
于 2012-10-29T09:17:16.347 に答える
0

2 つのこと: 1. #show など、1 つの ID を持つ 1 つの要素しか持てないと思います。より多くのボタンを参照したい場合は、次のようなクラスを使用する必要があります: show() (ボタンがループで出力されることを理解しているため、より多くのボタンがあります)。

2番目：JavaScriptコード内で、 $("p")... を実行します-これはすべてを参照します

ページ上の要素。$(this) を使用して、そこから開始する必要があると思います。この記事をチェックしてください。詳しく説明されています。

于 2012-10-29T09:11:23.177 に答える
-1

これには多くの方法があります。ここに1つあります：

まず、ID にループ番号を追加します ($i としましょう)。

<p id="TITLE_<?php echo $i; ?>" style="display:none;"><?php echo $title;?></p>
<input type="button" class="show" data-number="<?php echo $i; ?>"/>               
<input type="button" class="hide" data-number="<?php echo $i; ?>" />

関数は次のようになります。

$(".show").click(function () {
   $("TITLE_" + $(this).data('number')).show('fast');
});

$(".hide").click(function () {
    $("TITLE_" + $(this).data('number')).hide('fast');
});

もちろん、$i を使用せずに JQUERY 経由で行う方法もあります。

編集：

ページの読み込み時にタグが非表示になっている場合は、style=display:none を使用します。

上記のタグを使用するか、次のように JQuery を使用できます。

$(document).ready( function() {
    $("p[id^=TITLE_]").hide(); 
// this will retrieve all <p> tags with ID that starts                    
// with TITLE_ and hide them
});
于 2012-10-29T09:15:24.263 に答える