Question

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

<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做同样的事情，我也计划创建更多的东西，所以我不想多次重复相同的代码。有没有更好的方法呢？

Answer 1

我建议使用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();
});

这样，任何带有clickable类的元素在点击时都会查找包含类initiallyHidden的兄弟并显示它

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

Answer 2

<强>更新

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>

Answer 3

$('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（）指向每行的第二个单元格。

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

我打算创造更多的，所以我不想多次重复相同的代码

Answer 4

怎么样：

<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>

如果点击另一个，则可见

4 个答案: