在特定情况下使用 jQuery/JS 更改类答案

【问题标题】：Change class with jQuery/JS in specific case在特定情况下使用 jQuery/JS 更改类
【发布时间】：2014-08-28 12:35:15
【问题描述】：

对于这种情况，我使用表格。（跟进架构）默认情况下，“tr.classified”是不显示的。

我想添加一个在需要时显示“tr.classified”的按钮。

我不是网络开发人员。

我是从这个开始的；

<script>
$( "buttonchange" ).click(function() {
  $( this ).switchClass( "tr.classified", "tr.classified2");
});
</script>

<div class="buttonchange">Display Archives</button>

根本不工作:(

你能看看这个吗？

【问题讨论】：

请提供对应的css类。
Switching between two different classes jQuery 的可能重复项

标签： javascript jquery class html-table

【解决方案1】：

我认为您正在 jquery 中寻找 toggleClass

$( "#buttonchange" ).click(function() {
  $( this ).toggleClass("classified classified2");
});

TOGGLECLASS

【讨论】：

我从你那里复制#，但你在 4 分钟后复制了我所有的代码

【解决方案2】：

网上有很多jQuery的toggleClass函数的使用例子，建议你查一下。

与此同时，以下是如何解决您的问题：

将toggle-master 类添加到要切换的行。
使用以下代码单击切换按钮时，在这些行上切换 classified 类：

$("buttonchange").click(function(){ $(".toggle-master").toggleClass("分类"); });

如果 classified 是负责隐藏元素的类，则不需要 classified2 类。

不要忘记在$(document).ready(function(){/*add here*/}); 函数中添加代码，并在您的页面上包含jQuery。

这是一个有效的example。

【讨论】：

【解决方案3】：

你只需要为按钮添加一个事件处理程序并像这样显示或隐藏你的表格，

HTML 代码：

<button class="clik">Display/hide Table</button>
<table id="codexpl">
  <tr>
    <th>#</th>
    <th>Columna</th>
    <th>Relative</th>
    <th>Isso</th>
</tr>
<tr>
    <td>1</td>
    <td>This</td>
    <td>Column</td>
    <td>Is</td>
</tr>
<tr>
    <td>2</td>
    <td>Coloumn</td>
    <td>two</td>
    <td>this</td>
</tr>
<tr>
    <td>3</td>
    <td>is</td>
    <td>not equals</td>
    <td>a</td>
</tr>
<tr>
    <td>4</td>
    <td>the</td>
    <td>Column</td>
    <td>real</td>
</tr>
<tr>
    <td>5</td>
    <td>first</td>
    <td>One</td>
    <td>Coloumn</td>
  </tr>
  </table>

Jquery 代码：

//hide the table by default
$('#codexpl').hide();

$(".clik" ).on('click',function() {
   $('#codexpl').toggle();
});

JSFiddle：

http://jsfiddle.net/dreamweiver/eboLopwc/1/

快乐编码:)

【讨论】：

【解决方案4】：

试试这个：-

$( "#buttonchange" ).click(function() {     //put '#' here for 'id' selector
   $( this ).toggleClass("classified classified2");  // use 'toggleClass' as shown here
});

【讨论】：