Присвойте уникальный идентификатор div как созданный, а затем создайте ссылку с помощью jquery.

Я новичок в php и новичок в jQuery. У меня есть страница PHP, которая заполняется данными из таблицы MySQL. Я пытаюсь добиться того, чтобы h3, который содержит "View Job", имел уникальный присвоенный ему идентификатор, а также div, который выводит описание работы. Затем я хотел бы сослаться на них с помощью jQuery, чтобы, если кто-то щелкнет Просмотр задания, отобразилось только описание этой работы. Я надеюсь это имеет смысл.

Я попробовал это на уроках, и, конечно, все описания работ проявились, когда щелкнуло любое Просмотр работы.

Я попробовал решение здесь, но это привело к тому, что на моей странице было 36 ссылок "Просмотреть работу", и мне нужно присвоить уникальный идентификатор h3 и 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#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-->
Источник

3 ответа

Назначьте classNames вместо id's

Затем используйте этот контекст, чтобы выбрать div который будет искать только один в контексте, а не все div

$("h3.view-job").on('click',function() {
    $(this).next("div.job-details").css("display" , "block");
});
Источник

Это должно делать то, что вы хотите (проверено в порядке). Просто замените свою регистрационную информацию mysql, и пример должен работать.

Я выполнил ваш div с подробностями работы (в нем отсутствовали данные из php), но вы действительно искали код jQuery.

Когда <h3> тег, чей идентификатор начинается с символовview-job при щелчке обработчик события jQuery click будет:

  • повторно скрыть все div, чей идентификатор начинается с символовjob-details

  • отобразить следующий div в дереве DOM

КОД:

<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-->
Источник 
<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-->
Источник
Другие вопросы по тегам