2016-12-04 11 views
1

私は再び質問を再投稿しました。私は表示と非表示ボタン(onclick関数)の結果のリストをループする私のメインページのforループを持っています。私がshow()ボタンのどれかをクリックするたびに、div.viewはすべてtogatherにスライドし、hide()ボタンをクリックすると、div.vewがすべてtogatherにスライドします。各div.viewタグに対応するshow()をそれぞれ持っていたいと思います。私の悪い英語を残念に思って、私のコーディングの経験が不足しているためにもう一度質問を再投稿してください。誰でも私をここで助けることができれば感謝します。どうもありがとう。php forループ各関数イベントのOnclick関数

隠す enter image description here

enter image description here

<?php 
    for($i = 0; $i < count($db); $i++) 
    { 
    <div class="view"> 
    <?php 
    echo $data["Description"]; 
    ?> 
    </div> 


    <div style="float:right; margin:0px 8px 0px 0px;"> 
    <div onClick="show()" style="cursor:pointer; font-size:12px; color:#8080FF; float:left;">Show&nbsp;<div style="color:#FFF; font-weight:bold; float:right;">/</div></div> 
    <div onClick="hide()" style="cursor:pointer; font-size:12px; color:#8080FF; float:right;">&nbsp;Hide</div> 
    </div> 

    } 
    ?> 

search.js

function show() 
    {  
    $('div.view').animate({height:160},500); 
    } 

    function hide() 
    { 
    $('div.view').animate({height:40},500); 
    } 

答えて

0

私は右のあなたの質問を理解していれば、あなたは/あなたがリンクをクリックしたとき、それぞれが個別にDIV隠し示したいと思います。 これを行うには、作業するdivを識別するパラメータを渡す必要があります。幸いなことに、このようなパラメータはコード内にすでにあります。これはループのインデックスです。ヨは、あなたのコードに

<div onClick="show(<?=$i?>)">show</div> 

は、その後、あなたが唯一のdivが表示されますリンクをクリックしたとき、パラメータ

function show(index) 
{  
    $('div.view').eq(index).animate({height:160},500); 
} 

にこの方法を使用するようにjQueryの機能を変更する必要があり、このようにそれを追加することができますこのリンクによって参照される。

これを行うには、より良い方法があります。 HTMLと関数呼び出しを混在させずに、イベントリスナーをDOM要素に追加するべきです。また、style属性で要素のスタイリングをしないでください。代わりにCSSクラスを使用してください。

+0

sebastien maloronありがとうございました。私はいくつかのトラブルシューティングの後に問題を解決しました。 – user3379528

0

これを行うにはいくつかの方法を示しています。その後、JSで作成し、

function show(obj) { 
    $(obj).parent().animate({height: 160}, 500); 
} 

それとも、あなたのショーに識別クラスを追加し、ボタンを非表示にする:あなたは、あなたのHTMLにあなたの「ショーを()」に「ショー(本)」に変更し、あなたのJSコードにすることができますこのようなイベント:

$('.show').click(function() { 
    $(this).parent().animate({height: 160}, 500); 
}); 
+1

あなたのお返事をいただきありがとうございますが、上記の回答は私にとってより適しています。ありがとうございました – user3379528

関連する問題