2

この質問が私の質問の根本的な原因です。

次のtrthまですべての次のtrtdを非表示にします

すでに2つの回答が投稿されているので、別のことを試してみようと思いました

Javascript：

$(function(){ 
    var thList = $('td');
    $('td').click(function(){
        for( i =0; i < thList.length;i++){
            // What to do here
        }
    });
});

HTML：

    <table border="2">
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 3 </td>
        </tr>
    <table>

ここで行っているのは、クリックイベントを<TH>要素に割り当てることです。そして、ロード時<TH>に、配列内のDOM内のすべてを取得しています。

今、私の論理はです。forループを繰り返し、クリックTHされたものがのループでない場合はfor loop、非表示にします。

私が試したのは

if ( thList[i] != $(this)) { thList[i].style.display = 'none' }

しかし、これは機能していないようです。オブジェクトを比較するためにそこに配置する必要のあるコード

4

4 に答える 4

2

1-あなた$(this)はthisjqueryオブジェクトであるとは異なります2-あなたはここにTH要素を持っていませんあなたが望むのと似ていますがtdのコードです

$(function(){
var tdList = $('td');
$('td').click(function(){
    tdList.hide();
    $(this).show();
    //OR  tdList.not(this).hide();

  });
});
于 2012-07-10T14:42:53.177 に答える
2

jQueryオブジェクト内のアイテムにアクセスする場合、それらは新しいjQueryオブジェクトとしてではなく、DOM要素として取得されます。したがって、要素参照をjQueryオブジェクトでラップするのではなく、要素参照と直接比較する必要があります。

for (i = 0; i < thList.length; i++) {
  if ( thList[i] != this) { thList[i].style.display = 'none' }
}

notこのメソッドを使用して、現在の要素なしでコレクションを取得することもできます。

thList.not(this).each(function(){ this.style.display = 'none'; });

もちろん、このcss方法を使用すると、さらに簡単になります。

thList.not(this).css('display', 'none');

注意：テーブル内のセルは、テーブル内の他のセルに影響を与えずに非表示にできる個別の要素ではありません。テーブル内のセルを非表示にすると、テーブルに予期しない動作が表示される場合があります。

于 2012-07-10T14:26:14.883 に答える
2

thマークアップの例に-elementsが含まれていないという事実に加えて、次のことを試すことができます。

$('td').click(function(){

    var $tdList = $('td').not(this); // <- get all th's and exlude the clicked element

    $tdList.each(function(){this.style.display = 'none'; });
});

またはさらに良いことに、jQueryを使用すると、各ラッパーは必要ありません。

$tdList.hide();

jQueryは多くの作業を節約するので、できる限りそれを使用するようにしてくださいeach()-forループの代わりに使用し、ネイティブの代わりに.css()（またはさらに多くの専用メソッド）を使用します-これによりコードが大幅に短縮されます。.hide().style

于 2012-07-10T14:33:23.233 に答える
2

次を使用できます。

thList.click(function() {
    thList.not(this).css("display", "none");
});

パフォーマンス上の理由から、代わりにイベントを委任できます。

$("#yourtable").on("click", "th", function(event) {
    thList.not(event.target).css("display", "none");
});

私はそれをテストしませんでしたが、動作するはずです。

ただし、UIについては興味があります。このようにTHが非表示になっていると、最初にクリックした後は表示できなくなります。

于 2012-07-10T14:35:10.493 に答える