1

当单击“更多信息”按钮时，我已经尝试了一个多星期来滑动切换表格行，但似乎根本没有任何效果。

我是 Jquery 的新手，所以如果有人可以帮我滑动切换“more-info-1”、“more-info-2”、“more-info-3”tr 标签。主要问题是这些 id 是通过 php 动态创建的，我不明白如何在 Jquery 中选择它们——比如使用“更多信息”或其他东西。

我希望它像这个例子一样工作： 这里当然减去 iframe。

用户将单击“更多信息”按钮，然后“更多信息-”tr 将向下滑动。

这是页面源代码：（我不知道如何在 Stack OverFlow 上正确插入 HTML，是否有特殊的方法 - 代码按钮无法与 HTML 一起正常工作）

    html

div id="output-listings"

    div class="main-info"

        table class="listings"

            tbody

                    tr id="more-info-1" class="mi-1"

                        td

                        div id="more-1" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-1"

                        tdLeftlane News/td

                        tdwww.leftlanenews.com//td

                        tda id="link-1" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-2" class="mi-2"

                        td

                        div id="more-2" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-2"

                        tdMotor Authority/td

                        tdwww.motorauthority.com/ /td

                        tda id="link-2" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-3" class="mi-3"

                        td

                        div id="more-3" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-3"

                        tdAutoblog/td

                        tdhttp://www.autoblog.com//td

                        tda id="link-3" class="more-info-link" href="#"More info/a/td

                    /tr

            /tbody

        /table

    /div

/div!--end output-listings--

/html

我将非常感谢您的帮助。

4

5 回答 5

1

尽管 craig 的响应有效，但您可以限制您的代码并允许 jquery 在一定范围内获取您的所有 TR 元素，并按照他的建议解析 id 等。

$(".listings tbody tr").each(function(index) {
    // hide by default
    $(this).css({'display': 'none'});


    // set the onclicks
    $(this).click(function() {
      // your dosomething can change your appearance
      dosomething(the_id_you_parse_out);
    });
});

不确定那是否是工作代码，我只是把它放在一起，这样你就可以了解如何使用 jquery 的选择器。

于 2009-07-16T01:16:27.197 回答
0

由于 jquery 代码通常仅在 DOM 准备就绪时执行，因此如果您最初不使用 CSS 来隐藏它，您将始终看到 TR，即使只有一毫秒，直到您的 js 代码隐藏它。

所以这里的大多数贡献者可能都回答了你的问题。我想补充一点，您最初可以使用 CSS 隐藏 TR，然后使用 JS 来完成其余的工作。

一个好的经验法则是尝试仅使用 CSS 获得“默认”页面浏览，然后使用 jquery 代码添加丰富的功能。或者至少我会这样做。

于 2009-07-27T21:42:49.937 回答
0

要使 trs 不可见，请将 style='display:none' 添加到它们。

于 2009-07-13T20:57:15.837 回答
0

乍一看，您似乎想要这样的东西。

$('#link-1').click(function(){
    $('#more-info-1').slideToggle()
})

您还可以通过更改类的设置方式或通过让内部函数解析单击的链接的数量并将其提供给内部 jQuery 调用来概括此脚本以与所有三个一起工作：

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).slideToggle();
})
于 2009-07-13T19:49:08.500 回答
0

根据您是否需要为您的元素分配特定的 id 以用于其他目的，您实际上可以这样做而无需提供单独的 id。

在此示例中，在加载时，我们首先隐藏任何具有可切换类的 tr。然后我们告诉 jQuery 将 dom 向上跳几级，并隐藏下一个 tr - 这消除了调用 id 的需要。

示例 jQuery：

$(document).ready(function(){

$("#tableToggle tr.toggleable").hide();

$("#tableToggle .tableToggleButton").click(function(){
    $(this).parent().parent().next('tr').slideToggle();                                                 
});

});

修改表示例：

<table id="tableToggle">
<tbody>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
</tbody>
</table>
于 2009-07-20T04:52:03.840 回答