すべてではなく選択したdivのみを折り畳んで展開しますか？

私はjQueryを使い始めた初心者です。オープンなヘルプデスクのチケットの一覧を表示する私たちのチームのための基本的なPHPアプリケーションを構築しています。

画面の乱れを避けるため、チケットのタイトルとクリックした場合の説明のみを表示します。ここで

が今の私のコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <title>Animate my Div</title> 
     <style type="text/css" media="screen"> 
      a {     text-decoration: none;    } 
      #expand {     background-color: #fff;    } 
      #mydiv {     display: none;    } 
     </style> 
     <script src="jquery-1.3.2.js" type="text/javascript"></script> 
     <script type="text/javascript"> $(document).ready(function(){ 
    $("a").click(function(){ $("div").slideToggle(1000);    }); 
      });   </script> 
    </head> 
    <body> 
     <?php 
     $con = mysql_connect("korg", "joe", "bob"); 
     if (!$con) {    die('Could not connect: ' . mysql_error()); } 
     mysql_select_db("wfr11", $con); 
     $result = mysql_query(" select title, description from webcases"); 
     while ($row = mysql_fetch_array($result)) { 
     ?> 
      <p><a href="#expand"><?php echo $row['title']; ?></a></p> 
      <div id="mydiv"><?php echo $row['description']; ?></div> 
     <?php 
     }   mysql_close($con);   ?> 
    </body> 
</html>

だ、私のコードは動作しますが、関係なく、私がクリックされたどのようなチケット名の、すべてのオープンチケットのすべてのdivを繰り広げます。

理想的には、クリックしたチケット名の説明を表示したいと思います。それらのすべてではありません。出来ますか？

ありがとうございました。

出典

2010-11-23 Chris

完全に可能です。

最初の問題は、ループ内でIDを繰り返していることです.HTML IDは一意でなければなりません。そこにクラスを使うことをお勧めします。その後

<?php 
while ($row = mysql_fetch_array($result)) { 
?> 
<div class="entry"> 
    <p><a href="#expand"><?php echo $row['title']; ?></a></p> 
    <div class="description"><?php echo $row['description']; ?></div> 
</div> 
<?php 
} 
?>

個別に対応することができる複合項目の中でそれらを作るためにDIVで一緒に二つの成分を包むだけでなく

、あなたはjQueryのちょうど隣接説明DIVを選択するようにする必要があります。

$(document).ready(function(){ 
    $(".entry a").click(function() { 
    $(this).parents('.entry').find('.description').slideToggle(1000); 
    }); 
});

彼らは適切なHTML形式で入っていない場合は、データベースからあなたのエコーのオンhtmlentities()を使用することを忘れないでください。

出典

2010-11-23 00:17:41 Orbling

@Orbling：あなたのソリューションは魅力的に機能しました！私がしなければならなかったのは、 ".description {display：none;}"と "entry {margin：0; padding：0px;}"という2つのCSSクラスを作成することでした。 – Chris

this.parentS（）はルート要素を選択しないため、スイートの方が優れていますか？以下の別の投稿はthis.parent（）を使って示唆しています...誰かが説明できますか？ – Chris

'.parent（）'は要素の直接の親を取得し、 '.parents（selector）'は特定のセレクタに一致するすべての親を取得します。もし '.closest（selector）'を使うと '.parents（）'のように機能しますが、すべてのマッチではなく最初の祖先だけを選びます。私が設定した方法では、HTML構造が機能を保持しながら少し変更することができます - 'エントリー'クラス内のアンカーが 'description'クラスを持つ要素を持っていると仮定するとスライドできます。 – Orbling

いいえ、あなたはトグルの後です。たぶん単純なdivではなく、必要なdivを選択するためにIDを使用することがあります。

$(".link_class").click(function(){ $("#my_div").slideToggle(1000);    });

リンクにクラスを割り当てることによって、特定のdivをターゲットにします。

出典

2010-11-23 00:19:32

すべてではなく選択したdivのみを折り畳んで展開しますか？

答えて

関連する問題