Question

任何人都知道如何在页面加载时隐藏列表视图的数据过滤器？

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>   
<body>
  <table class="table3">
    <tbody>
      <tr>

        <td>
          <a class="profileinfo1">
            <center><font size="5">8</font>
            </center>Service Called</a>
        </td>

      </tr>
    </tbody>
  </table>

  <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" class="friend">
    <li>Adam Kinkaid</li>
    <li>Matthew</li>
    <li>Owen</li>
    <li>Ryan</li>
    <li>William</li>
  </ul>

  <ul data-role="listview" data-inset="true" class="transaction">

    <li data-role="list-divider"><font size="3">Cash Transaction</font>
    </li>
    <li data-icon="info"><u><b>4th November 2015</b></u>
      <br>Service called: Plumbling
      <br>Service by: Timothy Tan
      <br>Payment made: $40</li>
    <li data-icon="info"><u><b>14th June 2015</b></u>
      <br><b>Service called:</b>Computer Repair
      <br>Service by: Jonathan Tan Wee Hong
      <br>Payment made: $150</li>
    <li data-icon="info"><u><b>12th January 2014</b></u>
      <br><b>Service called:</b>Lock Smithing
      <br>Service by: Adul Rashim
      <br>Payment made: $50</li>

    <li data-role="list-divider"><font size="3">Credit Card</font>
    </li>
    <li data-icon="info"><u><b>18th July 2015</b></u>
      <br>Service called: LockSmithing
      <br>Service by: Adul Rashim
      <br>Payment made: $50
      <br>Card Used: Mastercard</li>
    <li data-icon="info"><u><b>21th March 2014</b></u>
      <br>Service called: Computer Repair
      <br>Service by: Jonathan Tan Wee Hong
      <br>Payment made: $90
      <br>Card Used: Visacard</li>
    <li data-icon="info"><u><b>15th November 2013</b></u>
      <br>Service called: Air-Con Repair
      <br>Service by: Hong Xin Chang
      <br>Payment made: $60
      <br>Card Used: Visacard</li>
    <li data-icon="info"><u><b>10th May 2013</b></u>
      <br>Service called: Plumbling
      <br>Service by: Timothy Tan
      <br>Payment made: $200
      <br>Card Used: Mastercard</li>
    <li data-icon="info"><u><b>12th January 2013</b></u>
      <br>Service called: Air-Con Repair
      <br>Service by: Hong Xin Chang
      <br>Payment made: $170
      <br>Card Used: Mastercard</li>
  </ul>
</body>
</html>

我想做的另一件事是在点击类时隐藏数据过滤器。例如：

$(document).ready(function(){
        $(".profileinfo3").click(function(){
        $(".friend").hide();
    });
});

The search bar i wish to hide

Answer 1

这是一个片段，当您点击“服务已调用”时，搜索框将根据您的评论隐藏。

function click(){
this.nextElementSibling.style.display="none";

}
document.getElementsByClassName('table3')[0].addEventListener('click',click,false)

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>   
<body>
  <table class="table3">
    <tbody>
      <tr>

        <td>
          <a class="profileinfo1">
            <center><font size="5">8</font>
            </center>Service Called</a>
        </td>

      </tr>
    </tbody>
  </table>

  <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" class="friend">
    <li>Adam Kinkaid</li>
    <li>Matthew</li>
    <li>Owen</li>
    <li>Ryan</li>
    <li>William</li>
  </ul>

  <ul data-role="listview" data-inset="true" class="transaction">

    <li data-role="list-divider"><font size="3">Cash Transaction</font>
    </li>
    <li data-icon="info"><u><b>4th November 2015</b></u>
      <br>Service called: Plumbling
      <br>Service by: Timothy Tan
      <br>Payment made: $40</li>
    <li data-icon="info"><u><b>14th June 2015</b></u>
      <br><b>Service called:</b>Computer Repair
      <br>Service by: Jonathan Tan Wee Hong
      <br>Payment made: $150</li>
    <li data-icon="info"><u><b>12th January 2014</b></u>
      <br><b>Service called:</b>Lock Smithing
      <br>Service by: Adul Rashim
      <br>Payment made: $50</li>

    <li data-role="list-divider"><font size="3">Credit Card</font>
    </li>
    <li data-icon="info"><u><b>18th July 2015</b></u>
      <br>Service called: LockSmithing
      <br>Service by: Adul Rashim
      <br>Payment made: $50
      <br>Card Used: Mastercard</li>
    <li data-icon="info"><u><b>21th March 2014</b></u>
      <br>Service called: Computer Repair
      <br>Service by: Jonathan Tan Wee Hong
      <br>Payment made: $90
      <br>Card Used: Visacard</li>
    <li data-icon="info"><u><b>15th November 2013</b></u>
      <br>Service called: Air-Con Repair
      <br>Service by: Hong Xin Chang
      <br>Payment made: $60
      <br>Card Used: Visacard</li>
    <li data-icon="info"><u><b>10th May 2013</b></u>
      <br>Service called: Plumbling
      <br>Service by: Timothy Tan
      <br>Payment made: $200
      <br>Card Used: Mastercard</li>
    <li data-icon="info"><u><b>12th January 2013</b></u>
      <br>Service called: Air-Con Repair
      <br>Service by: Hong Xin Chang
      <br>Payment made: $170
      <br>Card Used: Mastercard</li>
  </ul>
</body>
</html>

如何在jquery中隐藏数据过滤器？

1 个答案: