Question

$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，所以如果我点击coursename，它应该显示当前的课程摘要，如果我点击下一个coursename，之前的摘要应该隐藏并显示当前的摘要。任何人都可以帮我一个明确的代码。

Answer 1

您也可以通过以下方式完成此操作：

$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});
}

我为每个元素设置了一个唯一的ID，给div一个enclose_ {ID}，因为数据库中的id是唯一的，每个div也是。

编辑：请参阅HTML的更新

Answer 2

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

Answer 3

不使用内联JavaScript：onclick =“ShowHide”，而是使用jQuery附加事件：

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

使机箱ID成为CLASS，您无法复制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});
  });
});

这是未经测试的代码，但应该给你一个要点。

Answer 4

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

Jquery的：

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

获取jQuery，PHP的动态元素id

4 个答案: