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

Change class with jQuery/JS in specific case

本文关键字：JS jQuery 在特定情况下      更新时间：2023-09-26

在这种情况下，我使用表。（后续架构）默认情况下，"tr.classified"显示为none。

我想添加一个按钮，当需要时显示"tr.classified"。

我不是网络开发人员。

我从这个开始；

<script>
$( "buttonchange" ).click(function() {
  $( this ).switchClass( "tr.classified", "tr.classified2");
});
</script>
<div class="buttonchange">Display Archives</button>

根本不起作用：（

你能看看这个吗？

我想您正在jquery 中查找toggleClass

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

TOGGLECLASS

网上有很多关于jQuery的toggleClass函数使用的例子，我建议您查找一下。

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

  1. 将toggle-master类添加到要切换的行中

  2. 使用以下代码单击切换按钮时，在这些行上切换classified类：

    $（"buttonchange"）.click（function（）{$（".togle-master"）.togleClass（"已分类"）；})；

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

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

下面是一个工作示例。

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

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/

快乐编码：）

试试这个：-

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