0

所以我有一个下面，代码可以在下面看到：

<table>
    <tr>
        <td id="first">itemOne</td>
        <td id="firstClicked">itemOneInfo</td>
    </tr>
    <tr>
        <td id="second">itemTwo</td>
        <td id="secondClicked">itemTwoInfo</td>
    </tr>
</table>

我希望在单击#first 和#second 时隐藏#firstClicked 和#secondClicked，我希望#firstCLicked 和#secondClicked 出现。我将如何做到这一点？到目前为止我有

$('#firstClicked').css('visiblilty','hidden');
$('#first').click(function() {
    $('#firstClicked').css('visibility','visible');
});

但这行不通。另外，即使这可行，我也必须为#second 做同样的事情，而且我还计划创建更多的，所以我不想多次重复相同的代码。有没有更好的方法来做到这一点？

4

4 回答 4

4

我建议使用 jQuery 的hide和show函数，以及on用于事件处理的函数。jQuery 的主要力量在于它使事情在浏览器中“正常工作”，因此使用hide将让库选择要执行的操作以使该操作发生，而不是您必须再猜测自己。例子：

$('#firstClicked').hide();
$('#first').on('click',function() {
    $('#firstClicked').show();
});

此外，在您的原始代码中，您有一些错误：

$('firstClicked').css('visiblilty','hidden');
// should be:
$('#firstClicked').css('visibility','hidden');

但是，由于您担心必须复制代码，您可以执行以下操作：

HTML：

<table>
    <tr>
        <td id="first" class="clickable">itemOne</td>
        <td id="firstClicked"><div class="initiallyHidden">itemOneInfo</div></td>
    </tr>
    <tr>
        <td id="second" class="clickable">itemTwo</td>
        <td id="secondClicked"><div class="initiallyHidden">itemTwoInfo</div></td>
    </tr>
</table>

JS：

$('.initiallyHidden').hide();
$('.clickable').on('click',function() {
    $(this).siblings("td").children(".initiallyHidden").show();
});

这样，任何具有 class 的元素clickable在单击时都会查找具有 class 的兄弟initiallyHidden并显示它

编辑：更新示例以处理 Christophe 评论中提出的问题。

于 2013-10-07T18:08:28.410 回答
0

更新：

using display none on a table cell is a really bad idea – Christophe

解决方案：在里面使用<span> or <div>元素<td>

尝试这个：

$('#firstClicked span').css('display','none');
$('#first').click(function() {
    $('#firstClicked span').css('display','block');
});

或这个：

  $('#firstClicked span').hide();
    $('#first').click(function() {
        $('#firstClicked span').show();
    });

工作完整代码：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#firstClicked span').css('display','none');
$('#first').click(function() {
    $('#firstClicked span').css('display','block');
});

$('#secondClicked span').hide();
$('#second').click(function() {
    $('#secondClicked span').show();
});

});
</script>

</head>
<body>
<table>
    <tr>
        <td id="first">itemOne</td>
        <td id="firstClicked"><span>itemOneInfo</span></td>
    </tr>
    <tr>
        <td id="second">itemTwo</td>
        <td id="secondClicked"><span>itemTwoInfo</span></td>
    </tr>
</table>
</body>
</html>
于 2013-10-07T18:09:08.490 回答
0 
$('tr').find('td:first').next().css('visibility','hidden');
$('tr').find('td:first').css('cursor','pointer');
$('tr').find('td:first').click(function() {
    $(this).next().css('visibility','visible');
});

find('td:first') 指向每行的第一个单元格。

find('td:first').next() 指向每行的第二个单元格。

这解决了您问题的最后一部分：

我也计划创建更多的，所以我不想多次重复相同的代码

于 2013-10-07T18:18:55.640 回答
-1

关于什么：

<script>

function show(div) {
    document.getElementById(div).style.display = 'block';
}

</script>
<table>
    <tr>
        <td id="first" onclick="show('firstClicked')">itemOne</td>
        <td id="firstClicked" style="display:none">itemOneInfo</td>
    </tr>
    <tr>
        <td id="second" onclick="show('secondClicked')">itemTwo</td>
        <td id="secondClicked" style="display:none">itemTwoInfo</td>
    </tr>
</table>
于 2013-10-07T18:11:32.123 回答