jQuery - 在另一个 DIV 中定位特定的 DIV

jQuery - Target a specific DIV within another DIV

本文关键字：DIV 定位 另一个 jQuery      更新时间：2023-09-26

我有一个我写的jQuery函数，它将滑动切换一个额外的表格行。 在可单击行的末尾有一个包含按钮的单元格，但是当单击容器div 触发该功能时，单击行中的任意位置将导致新行展开。

我需要仅在单击按钮时触发该功能，因为可以向表格的其他部分添加复选框、链接等。

法典：

    var toggleSpeed = 600;
    var expandText = "more";
    var collapseText = "less";
$(".extrainfo_container").click(function() {
       $(this).find('.extrainfo').slideToggle(toggleSpeed);
        if ($(this).find('.moreless').text() == collapseText) {
                $(this).find('.moreless').text(expandText)
        }
        else {
        $(this).find('.moreless').text(collapseText);
    }
    });  


<table>   
     <tr>
        <td>Header 1</td>
        <td>Header 2</td>
        <td>Header 3</td>
    </tr>
</table>
<div class="extrainfo_container">
    <table>   
         <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td><div class="moreless">more</div></td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="extrainfo">
                    Extra information.<p />
                    Extra information.<p />
                </div>
            </td>
        </tr>
    </table>
</div>

工作示例：http://jsfiddle.net/E22XR/69/

我

搜索了论坛，虽然我确实找到了类似的问题和答案，但没有一个对我有用。 我认为我一定在做一些不同的事情，并且/或者有更好的方法来获得相同的结果 - 我对编写自己的函数很陌生。

如果有更好的方法，要求是我不使用 ID，因为可以动态创建任意数量的行。

我想你可以这样做。

 var toggleSpeed = 600;
    var expandText = "more";
    var collapseText = "less";
$(".moreless").click(function() {
       $(".extrainfo_container").find('.extrainfo').slideToggle(toggleSpeed);
        if ($(".extrainfo_container").find('.moreless').text() == collapseText) {
                $(".extrainfo_container").find('.moreless').text(expandText)
        }
        else {
        $(".extrainfo_container").find('.moreless').text(collapseText);
    }
    });

编辑：破解多行

var toggleSpeed = 600;
var expandText = "more";
var collapseText = "less";
$(".moreless").click(function () {
   var detailsRow = $(this).parent().parent().next();
   detailsRow.find('.extrainfo').slideToggle(toggleSpeed);
   if ($(this).text() == collapseText)
      $(this).text(expandText);
   else
      $(this).text(collapseText);
});
相关文章：