0

わかりましたので、私はこのコードを持っています

//<!--

  $(document).ready (function() {
 $('.topicsShow').hide();
 var i = 1;
 $('.clickFunc').each(function(){
     $(this).click(function(){ 
         $('.topicsShow:eq('+$(this).data('idf')+')').toggle('slow');
     });
     $(this).data('idf',i);
     i++;
});
  });

// -->

var i = 0; のため、最初は正しく機能しませんでした。だから私は1に変更しました。少しうまくいきました。どうしてこれなの？誰か説明できますか？それが完全に正しく機能しない理由は、.clickFunc をクリックすると 1 つの td 要素が開くためです。tr 全体が非表示になっているため、その上の tr 要素 (カテゴリ ヘッダー) をクリックすると仮定します。そのカテゴリのすべてのトピックを開きます。このコードは、クリックすると tr 内の td 要素を 1 つだけ開くようにします。

誰かがここで私を少し助けてくれますか?

<tr class="clickFunc">
  <td></td>
 <td></td>
</tr>
<tr class="topicsShow">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="topicsShow">
<td></td>
 <td></td>
<td></td>
<td></td>
</tr>
<tr class="clickFunc">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="topicsShow">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

これは、生成されるものの基本的なモックアップです。カテゴリ/トピックを追加すると、topicsShow と clickFunc が増えます

4

2 に答える 2

0

これらのdivの可視性スタイルを「非表示」にハードコーディングし、jqueryの「show」メソッドでは元に戻せないため、機能しない場合があります。不思議なことに、「show」メソッドとは対照的に、「hide」はハードコードされた「visible」スタイルを問題なく元に戻すことができます。したがって、要素を意図したとおりに非表示/表示するには、可視性スタイルをハードコーディングせずに非表示/表示メソッドの組み合わせを使用するか、jqueryのcssメソッドを使用して可視性スタイルを希望どおりに設定する必要があります。

于 2012-10-22T03:04:44.033 に答える
0

これを試してください：

$(document).ready(function () {
    'use strict';
    $('.topicsShow').hide();
    $('.clickFunc').each(function (i, elem) {
        //i and elem are parameters passed to .each;
        //i naturally increments.
        var self = elem; //cache object so that jQuery doesn't do several lookups
        self.data('idf', i).click(function (e) {
            $('.topicsShow:eq(' + self.data('idf') + ')').toggle('slow');
            e.preventDefault(); //cancel bubbling
            return false;
        });
    });
});

私の推測では、ハンドラー$(this).data('idf',i);の前に割り当てる必要があります。click

これで問題が解決しない場合は、サンプル マークアップを投稿に追加してください。

アップデート：

これはあなたのマークアップで動作します:

$(document).ready(function () {
    $('.topicsShow').hide(); //hide topics
    $('.clickFunc').each(function (i, elem) {
        var self = $(elem) //cache object
        self.click(function (e) {
            //.nextUntil('.clickFunc') === get all siblings until .clickFunc
            //.filter('.topicsShow') === select only elements that have the .topicsShow class
            self.nextUntil('.clickFunc').filter('.topicsShow').toggle('slow');
            e.preventDefault(); //cancel bubbling
            return false;
        });
    });
});

元のコードが何もしなかった理由はelem、jQuery ラッパー (つまり$(elem)) に入れるのを忘れていたからです。

e.preventDefault();クリック イベントを妨げません。代わりに、クリック イベントが高次の要素 (祖先ツリーのさらに上) にバブリングするのを防ぎます。tr要素が切り替えられた後に他に何も起こりたくないので、それを含めました。私もreturn false;同じ理由で含めました（冗長かもしれませんが、そうであるかどうかわからないので、とにかく含めました）。

関数(質問で使用していたもの:) )の目的は、.data任意の値 (変数値、この場合は の値などi) をセレクタ内の一致する DOM 要素に格納することです。

質問のコードは次のことを行います。

$(document).ready(function () {
    $('.topicsShow').hide(); //hide topics
    var i = 1;  //declare a var for incrementing
    $('.clickFunc').each(function () {
        $(this).click(function () {
            //:eq(0) or :eq(1) as this only loops twice, see notes in markup below
            //when you intialized `i` to 1, this became :eq(1) or :eq(2)
            $('.topicsShow:eq(' + $(this).data('idf') + ')').toggle('slow');
        });
        $(this).data('idf', i); //store the value of `i` (0 || 1) || (1 || 2) in the matched element
        i++; //increment `i`
    });
});

このマークアップで:

<tr class="clickFunc"><!-- with var i = 0; click handler toggles .topicsShow:eq(0)-->
    <td>clickFunc</td><!-- with var i = 1; click handler toggles .topicsShow:eq(1)-->
    <td>clickFunc</td>
</tr>
<tr class="topicsShow"><!-- .topicsShow:eq(0) -->
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
</tr>
<tr class="topicsShow"><!-- .topicsShow:eq(1) -->
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
</tr>
<tr class="clickFunc"><!-- click handler toggles :eq(2)-->
    <td>clickFunc</td><!-- with var i = 0; click handler toggles .topicsShow:eq(1)-->
    <td>clickFunc</td><!-- with var i = 1; click handler toggles .topicsShow:eq(2)-->
    <td>clickFunc</td>
    <td>clickFunc</td>
</tr>
<tr class="topicsShow"><!-- .topicsShow:eq(2) -->
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
</tr>

これですべてが説明されることを願っています。:)

于 2012-10-22T03:10:09.740 に答える