javascript - 尝试通过循环数组失败来使用 jQuery 重新显示页面中的隐藏元素

Question

试图显示和隐藏页面的部分。 我只想显示页面中包含 conditionsToShow 数组中的匹配词的部分。

function hideWorkflowConditions() {

    // hide the elements initially
    $('#descriptors_table > tbody').children().css('display', 'none');

}

function showWorkflowConditions() {

    let conditionsToShow = `
    Block transition until approval
    Category is not Empty
    Code Committed
    File Uploader is User
    File Uploader is in Group
    File Uploader is in Project Role
    Has Attachments AM
    Has Links AM
    Hide transition from user
    Limit By Status
    No Open Reviews
    Only Assignee
    Only Reporter
    Permission
    SIL
    Script  [ScriptRunner]
    Sub-Task Blocking
    Unreviewed Code
    User Is In Group
    User Is In Group Custom Field
    User Is In Project Role
    Verify Number of Attachments in Category
    `;

    // create a new array, using the new line break
    let conditionsArray = conditionsToShow.split(/\n/).filter(Boolean);
    // trim the whitespace from the array
    let conditionsArrayTrimmed = conditionsArray.map(Function.prototype.call, String.prototype.trim);

    conditionsArrayTrimmed.forEach(element => {
        // will not work, doesn't give any errors in the console but the entire section stays hidden
        $( "#descriptors_table > tbody > tr (:contains('"+ element +"'))" ).css('display', 'table-row');

    });

}

hideWorkflowConditions();
showWorkflowConditions();

// running this works to show a single, previously hidden element
/*var elx = "Only Reporter";
$( "#descriptors_table > tbody > tr (:contains('"+ elx +"'))" ).css('display', 'table-row');
*/

Answer 1

:contains()两边的选择器无效，tr后面有一个空格，表示:contains() 将对行的后代而不是行本身进行操作。

function hideWorkflowConditions() {
  $('#descriptors_table > tbody').children().css('display', 'none');
}

function showWorkflowConditions() {
  let conditionsToShow = `
    Block transition until approval
    Category is not Empty
    Code Committed
    File Uploader is User
    File Uploader is in Group
    File Uploader is in Project Role
    Has Attachments AM
    Has Links AM
    Hide transition from user
    Limit By Status
    No Open Reviews
    Only Assignee
    Only Reporter
    Permission
    SIL
    Script  [ScriptRunner]
    Sub-Task Blocking
    Unreviewed Code
    User Is In Group
    User Is In Group Custom Field
    User Is In Project Role
    Verify Number of Attachments in Category
    `;

  // create a new array, using the new line break
  let conditionsArray = conditionsToShow.split(/\n/).filter(Boolean);
  // trim the whitespace from the array
  let conditionsArrayTrimmed = conditionsArray.map(Function.prototype.call, String.prototype.trim)
  .filter(Boolean);

  //console.log(conditionsArrayTrimmed);

  conditionsArrayTrimmed.forEach(element => {
    $("#descriptors_table > tbody > tr:contains('" + element + "')").css('display', 'table-row');

  });

}

hideWorkflowConditions();
showWorkflowConditions();

// running this works to show a single, previously hidden element
/*var elx = "Only Reporter";
$( "#descriptors_table > tbody > tr (:contains('"+ elx +"'))" ).css('display', 'table-row');
*/

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

<table id=descriptors_table>
  <tbody>
    <tr>
      <td>foo Permission
    </tr>
    <tr>
      <td>bar
    </tr>
  </tbody>
</table>

另外，我添加了另一个 .filter(Boolean) 来处理拆分产生的空白字符串。