为什么在使用 if/else 语句时会出现意外行为?

时间:2020-12-19 03:13:58

标签: javascript jquery

为什么当我使用 if/else 语句时,我的过滤器按钮出现了意外行为我的意思是类属性的状态值被分配给了几个按钮,但不仅仅是一个。当我使用两个 if 语句时,我得到了按钮所需的行为

 //declate states-filters
 var $all = $("#all"); //find all items
 var $active = $('#active'); //find active items
 var $completed = $("#completed"); //find completeditems

 //filter-all
 $all.on('click', function(){
     if($all.is('[class!="active"]')){ //check the element have the active value of the class

         if($completed.has('[class="active"]')){
                 $completed.removeClass('active'); $all.addClass('active')
         }
         if($active.has('[class="active"]')){
                 $active.removeClass('active'); $all.addClass('active')
         }

 }
 })
 //filter-active
 $active.on('click', function(){
     if($active.is('[class!="active"]')){ //check the element have the active value of the class


         if ($all.has('[class="active"]')) {
             $all.removeClass('active'); $active.addClass('active');
         } if ($completed.has('[class="active"]')){
             $completed.removeClass('active'); $active.addClass('active')
         }
     }
 })

 //filter-complete
 $completed.on('click', function(){
     if($completed.is('[class!="active"]')){ //check the element have the active value of the class

         if ($all.has('[class="active"]')) {
             $all.removeClass('active'); $completed.addClass('active');
             
         } if ($active.has('[class="active"]')){
             $active.removeClass('active'); $completed.addClass('active')
         }
     }
 })
<div class="states-filter">
    <p  class="state active" id="all"> All </p>
    <p  class="state" id="active"> Active </p>
    <p  class="state" id="completed"> Completed </p>
</div>

1 个答案:

答案 0 :(得分:1)

您不需要为所有 TeleportToolActivated = false TeleportPad.Touched:Connect(function(other) if TeleportToolActivated == false then -- Check if the other part is part of a player if other.Parent:FindFirstChild("Humanoid") ~= nil then TeleportToolActivated = true local player = game.Players:GetPlayerFromCharacter(other.Parent) -- If there is a tool with the same name in the backpack already, then return if player.Backpack:FindFirstChild(TeleportTool.Name) then return end local tool = TeleportTool:Clone() tool.Parent = player.Backpack TeleportToolActivated = true end end end) 标签使用 click 事件。由于所有 p 标签都具有相同的类,即:p 您可以将其用作选择器。然后,无论何时任何状态都是单击将 state 类添加到该元素并使用 active.not(this)

从其他元素中删除活动类

演示代码

removeClass()
var $all = $("p.state");

$all.on('click', function() {
  //p tag which is clicked add active class to that 
  $(this).addClass("active");
  //find p tag (not the one which is clicked remove active class from there)
  $(this).closest(".states-filter").find("p").not(this).removeClass("active")
})
.active {
  color: red
}