javascript - 如果单击另一个 <td>，则使 <td> 可见

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 评论中提出的问题。