如何切換內容<tr>

所以我有這個很好的小函數切換表的內容。內容存儲在類別爲「hiddenDiv」的<div>中。有一個<span>與「切換」類包含一個鏈接，點擊後打開「hiddenDiv」。我想將整個腳本應用於整個<tr>，這樣當您點擊<tr>內的任何地方時，它將顯示「hiddenDiv」。但是，當我只是將<tr>的類更改爲「切換」並刪除<span>類時，什麼都不會發生。任何幫助表示感謝！如何切換內容<tr>

$(".toggle").click(function() { 
    if ($(this).next().is(":hidden")) { 
    $(".hiddenDiv").hide(); 
    $(this).next().slideDown("fast"); 
    } else { 
    $(this).next().hide(); 
    } 
});

HTML：

 <table width="96%" border="0" align="center" cellpadding="4"> 
     <tr class="toggle" id="messageRow"> 
     <td width="4%" valign="top"> 
     <input type="checkbox" name="cb<?php echo $row['id']; ?>" id="cb" value="<?php echo $row['id']; ?>" /> 
     </td> 
     <td width="20%" valign="top"><div class="message_name"><a href="../../pages/profile_page/profile_page.php?id=<?php echo $Sid; ?>"><?php echo $Fname.' '. $Lname ;?></a></div></td> 
     <td width="58%" valign="top"> 
      <span style="padding:3px;"> 
      <a class="<?php echo $textWeight; ?>" id="subj_line_<?php echo $row['id']; ?>" style="cursor:pointer;" onclick="markAsRead(<?php echo $row['id']; ?>)"><?php echo stripslashes($row['subject']); ?></a> 
      </span> 
      <div class="hiddenDiv" id="hiddenDivId"> <br /> 
      <?php echo stripslashes(wordwrap(nl2br($row['message']), 54, "\n", true)); ?> 
      <br /><br /><a href="javascript:toggleReplyBox('<?php echo stripslashes($row['subject']); ?>','<?php echo $my_uname; ?>','<?php echo $my_id; ?>','<?php echo $Sname; ?>','<?php echo $fr_id; ?>','<?php echo $thisRandNum; ?>')">Reply</a><br /> 
      </div> 

     </td> 
     <td width="18%" valign="top"><span style="font-size:10px;"><?php echo $date; ?></span></td> 
     </tr> 
    </table>

來源

2012-06-04 lhasson

JavaScript適用於HTML，在這個問題中我們看不到任何地方。它是什麼樣子的？ –

你能不能展示你的HTML？問題在於你說'$（this）.next（）'，並且一旦你將click處理器放在整行上，隱藏的div就不是下一個元素。每行有一個隱藏的div嗎？爲什麼你同時使用'$（「。hiddenDiv」）'和$（this）.next（）'？ – nnnnnn

我已經添加了HTML，感謝您的幫助。 – lhasson

如果你談論的是隱藏的div是在與「.toggle」類中的一個TR TD那麼下面應該工作：

$(".toggle").click(function() { 
    var $hiddenDiv = $(this).find(".hiddenDiv"); 
    if ($hiddenDiv.is(":hidden")) { 
    $hiddenDiv.slideDown("fast"); 
    } else { 
    $hiddenDiv.slideUp("fast"); 
    } 
});

但是你可以簡化它如下：

$(".toggle").click(function() { 
    $(this).find(".hiddenDiv").slideToggle("fast"); 
});

查看slideToggle() doco。

編輯：剛剛看到您更新的問題與HTML。如果你的元素有一個id，那麼通過id而不是class選擇效率更高，即$("#hiddenDivId")而不是$(".hiddenDiv")。與$("#messageRow")相同，而不是$(".toggle")。

此外，您不應該爲非表格數據使用表格。

來源

2012-06-04 00:44:55 nnnnnn

謝謝！有效！我必須改變的唯一事情就是在點擊另一個時關閉打開的div！非常感謝！ – lhasson

如果你有多個行，每個都有自己的div，那麼是的，把'$（「。hiddenDiv」）。hide（）'作爲第一行，就像你原來的情況一樣。如果你每行有一個，你不應該給他們所有相同的ID。 – nnnnnn

如何切換內容<tr>

回答

相關問題