Question

我有这个Jquery函数，它带有一个过滤器，该过滤器通过单击将名为selected的类添加到过滤器中，并显示所选过滤器的所有数据过滤器标签。

我想定义的是，如果所选元素的同级有一个名为selected的类，则该类需要从其余元素中删除，而只能添加到所选元素中。

功能脚本

 (function ($) {

"use strict";

$.fn.filter = function (options) {

    var defaults = {
        nav: '[data-filter]' //
    }

    var $this = this,
        settings = $.extend(defaults, options),
        $target = $(settings.target),
        selected = [];

    return this.each( function() {

        var $element = $(this);

        $(settings.nav).each( function() {

            $(this).click( function(event) {

                // add selected class
                $(this).toggleClass('selected');

                // manipulate selected terms array
                if ($.inArray($(this).data('filter'), selected) < 0 ) {
                    selected.push($(this).data('filter'));
                } else {
                    var index = $.inArray($(this).data('filter'), selected);
                    selected.splice(index, 1);
                }

                // show/hide elements
                $element.find('[data-filter-tags]').each( function() {

                    var terms = $(this).data('filter-tags').split(','),
                        show = null;

                    for (var i=0;i<selected.length;i++) {
                        show = ($.inArray(selected[i], terms) >= 0 && show !== false);
                    }

                    if (show || selected.length == 0) {
                        $(this).fadeIn();
                    } else {
                        $(this).fadeOut();
                    }
                });

                event.preventDefault();

            });

        });

    });

};

  }(jQuery));

HTML

  <div id="tags">
  <div id="cities" data-activeclass="selected">
<a href="#" class="city" data-filter="telaviv">תל אביב</a>
<a href="#" class="city"   data-filter="ramatgan">רמת גן</a>
    <a href="#" id="city"  data-filter="city">הכל</a>
    <div>
</br>
<a href="#" data-filter="full">משרה מלאה    </a>
<a href="#" data-filter="part">משרה חלקית</a>
        <a href="#" data-filter="time">הכל</a>
</br>
  <a href="#" data-filter="sec">מזכירות</a>
       <a href="#" data-filter="op">הפעלה</a>
                <a href="#" data-filter="kind">הכל</a>
       </br>
   </nav>
     <div id="filter">
     <div class="block" style="background: green" data-filter- 
    tags="time,kind,city,telaviv,full,sec">תל אביב משרה מלאה מזכירות</div>
   <div class="block" style="background: blue" data-filter- 
  tags="time,kind,city,ramatgan,full,sec">רמת גן מלאה מזכירות</div>
<div class="block" style="background: blue" data-filter- 
  tags="time,kind,city,ramatgan,part,op">רמת גן חלקית הפעלה</div>
    <div class="block" style="background: blue" data-filter- 
     tags="time,kind,city,telaviv,full,op">תל אביב מלאה הפעלה</div>
            <div class="block" style="background: blue" data-filter- 
  tags="time,kind,city,ramatgan,part,sec">רמת גן חלקית מזכירות</div>
  </div>

Answer 1

我想定义的是，如果所选元素的兄弟姐妹具有名为 “选定”从他们中删除该类，并将其仅添加到选定的元素中。

如果单击该元素将其选中并取消选择其所有同级，则在您的click处理程序中：

$(this).addClass("selected").siblings().removeClass("selected");

简化的实时示例：

$("[data-filter]").on("click", function() {
    $(this).addClass("selected").siblings().removeClass("selected");
});

[data-filter] {
  border: 1px solid blue;
}
.selected {
  background-color: yellow;
}

<div>
  <span data-filter="1">one</span>
  <span data-filter="2">two</span>
  <span data-filter="3">three</span>
  <span data-filter="4">four</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果单击元素切换，我们需要toggleClass（您拥有），但其余部分相同：

$(this).toggleClass("selected").siblings().removeClass("selected");

...因为如果当前元素是所选元素，.siblings().removeClass("selected");部分将什么都不做。

简化的实时示例：

$("[data-filter]").on("click", function() {
    $(this).toggleClass("selected").siblings().removeClass("selected");
});

[data-filter] {
  border: 1px solid blue;
}
.selected {
  background-color: yellow;
}

<div>
  <span data-filter="1">one</span>
  <span data-filter="2">two</span>
  <span data-filter="3">three</span>
  <span data-filter="4">four</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

删除类到elemnt jQuery的同级

1 个答案: