Question

HTML：

<!-- NAV Equivalent -->
<div class="part">
  <a data-type="test">Test</a>
  <a data-type="new">New</a>
</div>

<!-- Items -->    
<div>
  <h5>Example 1</h5>
  <p>Test</p>
</div>

<div>
  <h5>Example 2</h5>
  <p>New</p>
</div>

<!-- Example 3, Test...

jQuery的：

$(".part span").click(
  function () {
    var dataType = $(this).attr('data-type');
    $("body").find('p[text*="' + dataType + '"]'):not(:contain("dataType")).addClass("hidden")
  }
);

我认为/希望jQuery工作的方式：

点击span内的.part后，取出该范围的data-type，找到包含与data-type＆＃39相同字符串的段落; s值，并隐藏任何不包含该字符串的段落。

的jsfiddle： https://jsfiddle.net/CSS_Apprentice/ft5jLka5/2/

Answer 1

您有正确的想法，但您尝试将 jQuery 选择器称为函数。

这是一个有效的版本。

＆＃13;

// this gets filled right from a txt
List<Student> students = new ArrayList<>();

public class Student{
    private String name;
    private int gradeCount;
    private int average;
    private boolean homeWork;
    ...
}

＆＃13;

$(".part span").click(
  function () {
    var dataType = $(this).attr('data-type');
    $('p:not(:contains("' + dataType + '"))').addClass('hidden')

  }
);

＆＃13;

.hidden{display:none}

＆＃13;

另外，正如您所说，这是一个个人开发工具，您可以使用javascript ES6 template literals编写字符串连接。更漂亮！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="part">
  <span data-type="test">Test</span>
  <span data-type="new">New</span>
</div>

<!-- Items -->    
<div>
  <h5>Example 1</h5>
  <p>Test</p>
</div>

<div>
  <h5>Example 2</h5>
  <p>New</p>
</div>

拉数据属性值并隐藏P而不匹配字符串

1 个答案: