Question

我有一个按钮。相同但每页有多个按钮。

<button id="btnIpoDetail" style="margin-top: 10px" class="ui button ipodetailbtn"">
<i class="icon newspaper"></i>
Details
</button>

<button id="btnIpoDetail" style="margin-top: 10px" class="ui button ipodetailbtn"">
<i class="icon newspaper"></i>
Details
</button>

这是我要切换的表格。显示/隐藏

        <table class="ui unstackable table ipotablec" id="ipoTable" >
        <thead>
        <tr>
            <th>SO #</th>
            <th>Date</th>
            <th>Qty</th>
            <th>Price (MVR)</th>
            <th>Status</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1234</td>
            <td>12-02-2012</td>
            <td>350</td>
            <td>1,234,534/-</td>
            <td>Active</td>
        </tr>

        </tbody>
    </table>

这是我用来隐藏的剧本，并使用上面的按钮显示表格。

$(".ipotablec").hide();


$(".ipodetailbtn").click(function(){

    $(".ipotablec").fadeToggle('slow');

});

我面临的问题是，只要有一张桌子就行。但是，一旦有多个具有相同类名的表，单击一个按钮可切换所有表。我该如何解决这个问题？

Answer 1

使用ID替换类，使用table0，table1等唯一ID名称为每个表命名。这样，您可以执行$("#table0").fadeToggle("slow")或$("#table1").fadeToggle("slow")。

Answer 2

为每个按钮指定一个唯一ID：

<plugin>
    <artifactId>maven-assembly-plugin</artifactId>
    <configuration>
      <archive>
        <manifest>
          <mainClass>com.foo.MyMainClass</mainClass>
        </manifest>
      </archive>
      <descriptorRefs>
        <descriptorRef>jar-with-dependencies</descriptorRef>
      </descriptorRefs>
    </configuration>
    <executions>
      <execution>
      <id>make-assembly</id>
      <phase>package</phase>
      <goals>
        <goal>single</goal>
      </goals>
      </execution>
    </executions>
  </plugin>

为每个表提供唯一的ID：

<button id="btnIpoDetail_1" style="margin-top: 10px" class="ui button ipodetailbtn">
    <i class="icon newspaper"></i>
    Details
</button>

将脚本更改为此类（使用ID而不是类）。类选择器将选择具有该类的所有元素，id选择器选择具有该id的元素：

<table class="ui unstackable table ipotablec" id="ipoTable_1">
    <thead>
        <tr>
            <th>SO #</th>
            <th>Date</th>
            <th>Qty</th>
            <th>Price (MVR)</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1234</td>
            <td>12-02-2012</td>
            <td>350</td>
            <td>1,234,534/-</td>
            <td>Active</td>
        </tr>

    </tbody>
</table>

jQuery使用Class隐藏和显示多个元素

2 个答案: