javascript - 如何让元素内容相同的执行事件效果

Question

<p class="show">1</p>
<p class="show">2</p>
<p class="show">2</p>
<p class="show">1</p>
<p class="show">1</p>
<p class="show">3</p>
我想让与this一样的内容都显示 其他隐藏
这句话应该怎么说

Answer 1

$(".show").click(function(){
    var _this=$(this);
    $(".show").each(function(){
        if($(this).text()!=_this.text()){
            $(this).hide()
        }
    })
})

Answer 2

$(".show").click(function(event){
  var target = event.target;
  $(target).siblings().hide();
  $(target).show();
});

没必要再写循环，用siblings这个特性对兄弟节点操作也许会更好

Answer 3

1楼回答正确

Answer 4

换个思路，先把内容一样的元素放到一个对象数组里，然后点击的时候获取当前内容，最后遍历对象数组然后将对应的元素隐藏。

优点：当元素特别多的时候，不需要遍历所有的节点；
缺点：页面加载就要遍历所有的元素节点。

    let map = {},
        $show = $('.show'),
        self = this;

    $show.each(function(index, item) {
        let $this = $(this);
        let content = $this.text();

        if (!map[content]) {
            map[content] = [];
        }
        map[content].push($this)
    });

    $show.click(function() {
        let $this = $(this),
            content = $this.text();

        map[content].forEach(function(item, index, array) {
            item.hide();
        },self);
   });