获取 jQuery， PHP 的动态元素 ID - getting dynamic element id for jQuery, PHP

getting dynamic element id for jQuery, PHP

本文关键字：动态元素 ID PHP jQuery 获取 | 更新日期: 2023-09-27

$cour = mysql_sql('SELECT c.id, c.category, cc.name, c.fullname,c.summary FROM 
mdl_course c, mdl_course_categories cc WHERE c.id = cc.course');
echo '<table>';                       
foreach($cour as $cou) 
{
    $coursename = $cou->fullname;
    $courseid = $cou->id;
    $summary = $cou->summary;
    echo '
        <tr style="border:1px solid #BACC82;">  
            <td><a onclick="ShowHide(); return false;">'.$coursename.'</a></td>
        </tr>
        <!--SHOW AND HIDE DIV-->
        <div id="enclosure" style="display:none;">'.$summary.'</div>
    ';
}
echo '</table>';

JQUERY在同一文件中

function ShowHide() {
    $('#enclosure').animate({"height": "toggle"}, {duration: 1000});
}

在我的代码中，它仅适用于第一行。我想$courseid传递给 Jquery，这样如果我单击课程名称，它应该显示当前课程摘要，如果我单击下一个课程名称，以前的摘要应该隐藏并显示当前课程。谁能帮我一个清晰的代码。

您也可以通过以下方式执行此操作：

$cour = mysql_sql('SELECT c.id, c.category, cc.name, c.fullname,c.summary FROM 
mdl_course c, mdl_course_categories cc WHERE c.id = cc.course');
echo '<table>';                       
foreach($cour as $cou) 
{
    $coursename = $cou->fullname;
    $courseid = $cou->id;
    $summary = $cou->summary;
    echo '
        <tr style="border:1px solid #BACC82;">  
            <td>
                <a onclick="ShowHide('.$courseid.'); return false;">'.$coursename.'</a>
                <!--SHOW AND HIDE DIV-->
                <div id="enclosure_'.$courseid.'" style="display:none;">'.$summary.'</div>
            </td>
        </tr>
    ';
}
echo '</table>';

javascript：

function ShowHide(id) {
    $('#enclosure_'+ id).animate({"height": "toggle"}, {duration: 1000});
}

我通过给div 一个 enclose_{ID} 使每个元素都具有唯一的 ID，因为数据库中的 id 都是唯一的，每个div 也是如此。

编辑：请参阅HTML的更新

页面上不能有多个具有相同 Id 的元素。按类名选择，或者更确切地说，应用更复杂的选择器，例如$('#yourtableid div')如果该div 只是表中的div

不要使用内联 JavaScript：onclick="ShowHide"，使用 jQuery 附加一个事件：

<td><a class="show-hide-action">'$coursename.'</a></td>
<div class="enclosure" style="display:none;">'.$summary.'</div>

使存储模块 ID 成为类，不能重复 ID。

$(function() {                                // encapsulate in document.ready
  $('.show-hide-action').click(function() {   // bind action
    $(this)                                   // 'this' is the clicked element
      .parent()                               // parent should be the TD
      .next(".enclosure")                      // select the corresponding .enclosure  
      .animate({"height": "toggle"}, {duration: 1000});
  });
});

这是未经测试的代码，但应该为您提供它的要点。

    <!--SHOW AND HIDE DIV-->
<div class="enclosure" style="display:none;">'.$summary.'</div>

Jquery：

    function ShowHide() {
      $('.enclosure').animate({"height": "toggle"}, {duration: 1000});
    }