Javascript: jQuery hide/show 动态条件（数据表）

Question

我正在使用以下策略用 classes 标记我的元素，以便我可以 hide/display 基于变量值。

<th class="address _type both postal" aria-label="Address">Address</th>
<th class="postcode _type both postal" aria-label="Postcode">Postcode</th>
<th class="email _type both email " aria-label="Email">Email</th>
<th class="firstName _type both email postal" aria-label="First Name">First Name</th>

这是我正在处理的测试函数； _inviteFormat 可以是电子邮件、邮政或两者

/*columns hide/display*/  
  
    if(_inviteFormat='Email') {  
      var elArray = []  
      var classes = $('._type').attr('class').split(' ').toString(); //get all class names in class array
      
        if(classes.indexOf('email') == -1){ //search for email tagged columns by search for email class
           e = $('._type').attr('class').split(' ')[0] //return first class name in class array
           elArray.push(e) //push to element irrelevant columns
        }
      console.log(elArray)
        
    table.columns(elArray).visible(false); //hide columns
    
  }

目标：将包含class的页面上所有元素实例的第一个class的名称推入elArray_type 并且没有电子邮件 class 存在，这样我就可以隐藏这些元素。

当前行为：只有第一个元素 class 名称被推入数组。

这是我 table 中所有列的列表

我尝试了以下两个脚本，但它们不起作用

const cols = document.querySelector("#bulkInvite");
  const matches   = cols.querySelectorAll(".type");
  
  matches.forEach(function(cols) {
  console.log(cols);
  });


const nodeList = document.querySelectorAll(".type");
for (let i = 0; i < nodeList.length; i++) {      
  console.log(nodeList[i])
}

Answer 1

这就是为什么当 $('._type') returns 一个集合的 jQuery 对象时，只要你链接 .attr('class')返回第一个元素。

此外，您在 if 条件中有一个错字（我猜）（您写的是 if(_inviteFormat='Email')，但应该是 if(_inviteFormat==='Email') ).

最后，在您的 2 个脚本中，您正在查询 .type 但 class 名称是 ._type

这样它就得到了数组中所有不相关的 classes:

let _inviteFormat = 'Email';

if (_inviteFormat === "Email") {
  const elArray = [];

  $("._type").each((index, element) => { //loop inside collection
    const classes = $(element).attr("class").split(" "); //get all class names in class array

    if (classes.indexOf("email") === -1) {
      //search for email tagged columns by search for email class
      const e = $(element).attr("class").split(" ")[0];
      elArray.push(e); //push to element irrelevant columns
    }
  });

  console.log("These are the irrelevant classes:", elArray);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
  <thead>
    <tr>
      <th class="address _type both postal" aria-label="Address">Address</th>
      <th class="postcode _type both postal" aria-label="Postcode">Postcode</th>
      <th class="email _type both email " aria-label="Email">Email</th>
      <th class="firstName _type both email postal" aria-label="First Name">First Name</th>
    </tr>
  </thead>
</table>

Javascript: jQuery hide/show 动态条件（数据表）

Javascript: jQuery hide/show dynamic condition (datatables)

javascript

jquery

datatables