2

私はphpが初めてで、jQueryの初心者です。mySQL テーブルからのデータが取り込まれた php ページがあります。私が達成しようとしているのは、「ジョブの表示」を含む h3 に一意の ID を割り当てることと、ジョブの説明を出力する div を作成することです。次に、これらを jQuery で参照して、誰かが [ジョブの表示] をクリックすると、そのジョブの説明のみが表示されるようにします。これが理にかなっていることを願っています。

クラスでこれを試してみましたが、もちろん、ジョブの表示をクリックすると、すべてのジョブの説明が表示されました。

ここで解決策を試しましたが、ページに 36 個の「ジョブの表示」リンクが表示され、作成時に h3 と div に一意の ID を割り当てる必要があります。

私が探しているものを達成するための別の方法の提案を受け付けています。基本的には、ユーザーが各ジョブの [ジョブの表示] をクリックすると、各説明を非表示/折りたたむことです。

ここに私のコードがあります:

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <style type="text/css">
        .job-post{border-bottom: 1px solid red; padding: 0; margin: 10px 0;}
        h3, p{padding: 0; margin:0;}
        .view-job{cursor: pointer;}
        </style>
        <script type="text/javascript">
                        $(document).ready(function() {
                            $("div#job-details").css("display" , "none");
                             $("h3#view-job").click(function() {
                                $("div#job-details").css("display" , "block");
                            });

                        });
         </script> 
        <?php 
         // Connects to your Database 
         mysql_connect("xx", "xx", "xx") or die(mysql_error()); 
         mysql_select_db("lcwebsignups") or die(mysql_error()); 
         $data = mysql_query("SELECT * FROM openjobs") 
         or die(mysql_error()); 
          ?>
         <div id="job-container"> 
          <?php 
         Print ""; 
         while($info = mysql_fetch_array( $data )) 
         { 
         Print "<div class='job-post'>"; 
         Print "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
         Print "<h3 id='view-job'>View Job:</h3> <div id='job-details'>".$info['jobdesc'] . " </div>"; 
         Print "</div>";
         }  
         ?>
        </div><!--//END job-container-->
4

3 に答える 3

0 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.job-details{display:none;} 
.job-post{border-bottom: 1px solid red; padding: 0; margin: 10px 0;}
h3, p{padding: 0; margin:0;}
.view-job{cursor: pointer;}
</style>
<script type="text/javascript">
$(document).ready(function() {
     // Please hide this class on CSS
     // $("div.job-details").css("display" , "none");
     $("h3.view-job").click(function() {
        // you ned to use this keyword
        // it is very important when you use javascript or jquery
        // this keyword only pick element on which you click
        $(this).parent().find(".job-details").show();
    });

});
   </script> 
    <?php 
     // Connects to your Database 
     mysql_connect("xx", "xx", "xx") or die(mysql_error()); 
     mysql_select_db("lcwebsignups") or die(mysql_error()); 
     $data = mysql_query("SELECT * FROM openjobs") 
     or die(mysql_error()); 
     ?>
     <div id="job-container"> 
     <?php 
     // First of all Please use echo instead of Print
     echo ""; 
     while($info = mysql_fetch_array( $data )) 
     { 
         echo "<div class='job-post'>"; 
         echo "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
         // you can't use id multiple time in a same page so instead of id use Class
         // if you want to use id then you have to generate uniq id
         // check below I generate id --> I don't know your database field that's why I used jobId
         echo "<h3 class='view-job' id='job".$info['jobId']."'>View Job:</h3> <div class='job-details'>".$info['jobdesc'] . " </div>"; 
         echo "</div>";
     }  
     ?>
    </div><!--//END job-container-->
于 2013-06-06T21:27:20.923 に答える
0

これはあなたが望むことをするはずです（問題なくテストされています）。mysql のログイン情報を置き換えるだけで、例が機能するはずです。

仕事の詳細の div は完成しましたが (php からのデータが欠落していました)、本当に探していたのは jQuery コードです。

ID が文字で始まる<h3>タグがクリックされると、jQuery クリック イベント ハンドラーは次のことを行います。view-job

  • IDが文字で始まるすべてのdivを再度非表示にしますjob-details

  • DOM ツリーに次の div を表示する

コード：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
    .job-post{border-bottom: 1px solid red; padding: 0; margin: 10px 0;}
    h3, p{padding: 0; margin:0;}
    .view-job{cursor: pointer;}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $("div[id^='job-details']").css("display" , "none");

        $('h3[id^="view-job"]').click(function() {
            $("div[id^='job-details']").hide(500);
            $(this).next('div').show(500);
        });

    });
 </script> 

 <?php 
    // Connects to your Database 
    mysql_connect("xx", "xx", "xx") or die(mysql_error()); 
    mysql_select_db("lcwebsignups") or die(mysql_error()); 
    $data = mysql_query("SELECT * FROM openjobs") or die(mysql_error()); 

        $data = mysql_query("SELECT * FROM openjobs") or die(mysql_error());
  ?>

<div id="job-container"> 

<?php 
    echo "<br>"; 
    while($info = mysql_fetch_assoc( $data )) { 
        echo "<div class='job-post'>"; 
        echo "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
        echo "<h3>View Job:</h3> <div id='job-details'>".$info['jobdetails']."</div>"; 
        echo "</div>";
    }
 ?>

 </div><!--//END job-container-->
于 2013-06-06T22:40:58.677 に答える