0

データを含むいくつかのテーブルを含むページをまとめようとしています。ページが長くなる可能性があるため、ユーザーがヘッダーをクリックしてテーブルを折りたたむことができるようにしたいと考えています。利用可能なコンテンツが他にもあることを示すために + アイコンを使用し、折りたたみ可能であることを示すために - アイコンを使用する予定です。そこでアイコンであるiタグのクラス名を切り替える必要があります。私が言ったように、ページには同一の i タグタグを持つ複数のテーブルを含めることができるので、それをカバーする何かが必要です

HTML の例を次に示します。

<table class="table table-bordered">
        <thead class="heading" id="thead">
      <tr id="tr">
         <th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
      </tr>
    </thead>
    <tbody class="content">
        <tr>
          <td>Registration</td>
          <td>ABC 123</td>
          <td>&nbsp;</td>
        </tr>
        </tbody>
</table>

<table class="table table-bordered">
        <thead class="heading" id="thead">
      <tr id="tr">
         <th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
      </tr>
    </thead>
    <tbody class="content">
        <tr>
          <td>Start time</td>
          <td>11:57</td>
          <td>&nbsp;</td>
        </tr>
        </tbody>
</table>

そしてここにスクリプトがあります

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('.content').show();
  jQuery('.heading').click(function()
  {
    jQuery(this).next('.content').slideToggle('0');
    jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
  });
});
</script>

tbody の表示と非表示は正常に機能しますが、アイコンを変更できません。手がかりはありますか?

4

4 に答える 4

3

変更してみる

jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');

に

jQuery(this).find('i').toggleClass('icon-plus icon-minus');
于 2012-08-10T10:57:36.890 に答える
1

まず第一に、ページ内の複数の要素に同じIDを与えることは決してありません...これまでに。非常に悪い習慣であり、1つの特定の要素を参照する必要がある場合は複雑になります。

jqueryについては、addClassとremoveClassを使用します。

jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');

このような：

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('.content').show();
  jQuery('.heading').click(function()
  {
    jquery('.headingClass').removeClass('.headingclass');
    jquery(this + 'i').addClass('.headingclass');
    jQuery(this).next('.content').slideToggle('0');
    jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
  });
});
</script>
于 2012-08-10T10:57:39.517 に答える
1

の代わりにjQuery(this).parent().next("i")、jQuery(this).find("i")

あなたのサンプルでjQuery(this)は、​​thead 要素です。参照しiたい要素は兄弟ではなく子孫であるため.parent().next("i")、thead および tbody 要素と同じレベルの要素を照合しようとします!

于 2012-08-10T11:01:05.390 に答える
0

これを試してください（+と-のアイコンなし）

注：マークアップを少し変更しました。

CSS

i { padding:4px; cursor:pointer; }
.icon-minus {  color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}

HTML

<table class="table table-bordered">
<thead class="heading" >
    <tr >
        <th colspan="3" ><i class="icon-minus"></i>Basic info</th>
    </tr>
</thead>
<tbody class="content">
<tr>
    <td>Registration</td>
    <td>ABC 123</td>
    <td>&nbsp;</td>
</tr>
</tbody>
</table>

<table class="table table-bordered">
<thead class="heading" >
    <tr >
        <th colspan="3"> <i class="icon-minus"></i>More info</th>
    </tr>
</thead>
<tbody class="content">
<tr>
    <td>Start time</td>
    <td>11:57</td>
    <td>&nbsp;</td>
</tr>
</tbody>
</table>

jQuery

jQuery('.heading').bind('click',function(){
       jQuery(this).siblings('tbody').slideToggle('0');
       jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});

</ p>

デモ

于 2012-08-10T11:20:52.853 に答える