0

我有一个 2 行表——第一行是单列，第二行是 3 列。

4 个“表格单元格”中的每一个都有一个图形和一个标题，并被分配了相同的类

我希望能够单击 4 个单元格中的任何一个，隐藏所有 4 个单元格的内容，并根据单击的单元格将它们替换为新内容。

我可以通过为第二个表格行中的 3 个单元格分配相同的 td 类，使其工作（使用 show 和 hide 方法），但不知道如何制作单个顶部行单元格可单击以隐藏底部 3，或单击底部 3 中的任何一个并隐藏顶部行单元格以及第二行中的其他 2 个。

有没有一种简单的方法可以用 jQuery 做到这一点？

用代码更新

抱歉没有发布代码。在这方面我是全新的，到目前为止才知道，但现在明白你为什么想看它了……:-)

这是我到目前为止所拥有的。在此先感谢您的帮助。

$(document).ready(function () {
    $('.box').hide().filter('.top').show();
    $('.box h1').click(function () {
        $(this).hide();
        $(this).parent().siblings().hide();
        $(this).siblings().show().last();
        $(this).siblings('a.up-link').click(function () {
            $(this).siblings().hide().filter('h1').show();
            $(this).parent().siblings(':not(h1)').show();
            $(this).remove();
        });
    });
});

<table width="100%" border="0" cellpadding="0">
<tr>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background-repeat:no-repeat;">
        <p class="caption-2">
            Topic 1
        </p>
        </h1>
        <div class="box">
            <h1>Answer 1</h1>
        </div>
    </td>
</tr>
<tr>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background-repeat:no-repeat;">
        <p class="caption-2">
            Topic 2
        </p>
        </h1>
        <div class="box">
            <h1>Answer 2</h1>
        </div>
    </td>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background- repeat:no-repeat;">
        <p class="caption-2">
            Topic 3
        </p>
        </h1>
        <div class="box">
            <h1>Answer 3</h1>
        </div>
    </td>
    <td class="box top">
        <h1 style="background-image:url(blue.jpg);width:275px;height:230px; background- repeat:no-repeat;">
        <p class="caption-2">
            Topic 4
        </p>
        </h1>
        <div class="box">
            <h1>Answer 4</h1>
        </div>
    </td>
</tr>
</table>
4

2 回答 2

0

不确定这是否正是您正在寻找的（并且它不像您的其他问题的答案那样可嵌套使用该<div>结构），但以下内容将使您的主题可点击并显示其相关答案，同时隐藏其他主题。此外，可以单击答案以返回并再次显示所有主题：

$(document).ready(function () {
        $('td > :not(h1)').hide(); //hide the immediate children that aren't h1 of each td
        $('td > h1').click(function () { //make the immediate h1 child of the td (aka the Topic) clickable
            $('td > h1').hide(); //hide the topic when clicked
            $(this).next('div.box').show().off('click').click(function () { //show the answer box, unbind any previous click handler, add click handler that will reset it back to the way it was
                $(this).hide();
                $('td > h1').show();
            });
        });
    });
于 2013-06-11T23:22:08.440 回答
0

这只是一种方法，但却是一种强大的方法。

你可以把表格放到一个DIV中，然后用jQuery的.html()方法把整个Div替换成新的内容。

这是一个工作的jsFiddle

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
            table, tr, td {border:1px solid green;border-collapse:collapse;padding:5px 5px;}
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#theTable td').click(function() {
                    var i = $(this).attr('id');

                    if (i == 'r1c3'){
                        $('#theDiv').html('<table id="theTable"><tr><td>Just one cell in this table</td></tr></table>');
                    }else{
                        alert('You clicked: [' + i + ']. Try clicking Row 1 Cell 3');
                    }

                });


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="theDiv">
        <table id="theTable">
            <tr>
                <td id="r1c1">Row 1, Cell 1</td>
                <td id="r1c2">Row 1, Cell 2</td>
                <td id="r1c3">Row 1, Cell 3</td>
            </tr>
            <tr>
                <td id="r2c1">Row Two, Cell 1</td>
                <td id="r2c2">Row Two, Cell 2</td>
                <td id="r2c3">Row Two, Cell 3</td>
            </tr>
        </table>

    </div>


</body>
</html>
于 2013-06-06T20:30:29.547 回答