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

jQueryhideと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 
$('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() は、各行の 2 番目のセルを指します。

これはあなたの質問の最後の部分に対処します:

をさらに作成する予定なので、同じコードを何度も繰り返したくありません

于 2013-10-07T18:18:55.640 に答える
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 に答える