根据CSS课程，jQuery表演/隐藏栏

i具有带有删除按钮的动态数量图像。第一次单击删除按钮时，选择了图像，并出现顶部的条。如果我再次单击同一按钮，则未选择图像，顶部栏应再次消失。选择的多个选择/删除也应该发生。

我尝试通过在单击（选定）上添加类并在单击时将其删除来实现这一目标。

i然后计算班级的长度（存在多少），如果等于0，则顶部栏应该再次消失。

console.log向我展示它总是算0。

我缺少什么？

var bar = $('#bar');
var deleteBtn = $('.delete');
var selected = $('.selected');
var selection = 0;
deleteBtn.click(function() {
  if ($(this).hasClass("selected")) {
    $(this).removeClass("selected");
  } else {
    $(this).addClass("selected");
  }
  var selection = selected.length;
  if (bar.hasClass("hide")) {
    bar.addClass("show");
  } else {
    if (selection === 0) {
      bar.removeClass("barShowY");
    }
  }
  console.log(selection + " selected images");
});

#bar {
  height: 100px;
  width: 100%;
  background-color: firebrick;
  color: white;
}
.hide {
  margin-top: -100px;
}
.show {
  margin-top: 0;
}
.delete {
  width: 50px;
  height: 50px;
  background: yellow;
  cursor: pointer;
}
.selected {
  border-bottom: 3px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar" class="hide">delete selected images?</div>
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Ll2fJdBTPQylZO0Z4JQ9rtsIJsojwBxn.png" alt="">
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/lYG2Mgzz878Z8rU3yvlx9MwmR5dhDsyy.png" alt="">
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Zp2VXCJxT764bqDPyyIy0Yf2ZRFHzr3g.png" alt="">

您应该使用：

 var selection = $('.selected').length;

而不是：

var selection = selected.length;

由于表达式var selected = $('.selected');将在没有元素的元素中保存所有元素，其中selection变量中的所有元素，为什么它将保留为零count Zero。

var bar = $('#bar');
var deleteBtn = $('.delete');
var selection = 0;
deleteBtn.click(function() {
  if ($(this).hasClass("selected")) {
    $(this).removeClass("selected");
  } else {
    $(this).addClass("selected");
  }
  var selection = $('.selected').length;
  if (bar.hasClass("hide")) {
    bar.addClass("show");
  } else {
    if (selection === 0) {
      bar.removeClass("barShowY");
    }
  }
  console.log(selection + " selected images");
});

#bar {
  height: 100px;
  width: 100%;
  background-color: firebrick;
  color: white;
}
.hide {
  margin-top: -100px;
}
.show {
  margin-top: 0;
}
.delete {
  width: 50px;
  height: 50px;
  background: yellow;
  cursor: pointer;
}
.selected {
  border-bottom: 3px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar" class="hide">delete selected images?</div>
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Ll2fJdBTPQylZO0Z4JQ9rtsIJsojwBxn.png" alt="">
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/lYG2Mgzz878Z8rU3yvlx9MwmR5dhDsyy.png" alt="">
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Zp2VXCJxT764bqDPyyIy0Yf2ZRFHzr3g.png" alt="">

您要选择.selected类，然后在元素上应用类是错误原因的类，在删除按钮中移动它，请参见下面

var bar = $('#bar');
var deleteBtn = $('.delete');
var selection = 0;
$(document).ready(function() {
  deleteBtn.on('click', function() {
    console.log($('.selected').length);
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
    } else {
      $(this).addClass("selected");
    }
    var selection = $('.selected').length;
    if (bar.hasClass("hide")) {
      bar.addClass("show");
    } else {
      if (selection === 0) {
        bar.removeClass("barShowY");
      }
    }
    console.log(selection + " selected images");
  });
})

#bar {
  height: 100px;
  width: 100%;
  background-color: firebrick;
  color: white;
}
.hide {
  margin-top: -100px;
}
.show {
  margin-top: 0;
}
.delete {
  width: 50px;
  height: 50px;
  background: yellow;
  cursor: pointer;
}
.selected {
  border-bottom: 3px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar" class="hide">delete selected images?</div>
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Ll2fJdBTPQylZO0Z4JQ9rtsIJsojwBxn.png" alt="">
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/lYG2Mgzz878Z8rU3yvlx9MwmR5dhDsyy.png" alt="">
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Zp2VXCJxT764bqDPyyIy0Yf2ZRFHzr3g.png" alt="">

selected应在事件处理程序中声明。这应该是您的JS文件：

var bar = $('#bar');
var deleteBtn = $('.delete');
var selection = 0;
deleteBtn.click(function() {
  if ($(this).hasClass("selected")) {
    $(this).removeClass("selected");
  } else {
    $(this).addClass("selected");
  }
  var selected = $('.selected'); // Note these two lines
  var selection = selected.length;
  if (bar.hasClass("hide")) {
    bar.addClass("show");
  } else {
    if (selection === 0) {
      bar.removeClass("barShowY");
    }
  }
  console.log(selection + " selected images");
});

在Codepen https://codepen.io/anon/pen/zpmnex中查看它或在jsbin http://jsbin.com/cifekojasu/edit?js，，console，output

我已经修改了以下内容，我似乎正在得到您期望的结果

var selection = $('.selected').length;
if (bar.hasClass("hide")) {
  bar.removeClass("hide");
  bar.addClass("show");
} else {
  if (selection === 0) {
     bar.removeClass("show");
     bar.addClass("hide");
  }
}

barShowY应该只是show？

codepen在这里：https：//codepen.io/anon/pen/dzqnxm

您收集文档首次加载时收集所选图像的数量。因此，由于缓存，您将始终获得相同的数字（0）。您必须在每次点击中重新捕获金额，以便可以进行实时更新。

var bar = $('#bar');
var deleteBtn = $('.delete');
deleteBtn.click(function() {
  var selected;
  
  $(this).toggleClass('selected');
  
  selected = $('.selected').length;
  
  if (!selected) {
    bar.removeClass('show');
  } else {
    bar.addClass('show');
  }
  console.log($('.selected').length + " selected images");
});

#bar {
  height: 100px;
  width: 100%;
  background-color: firebrick;
  color: white;
}
.hide {
  margin-top: -100px;
}
.show {
  margin-top: 0;
}
.delete {
  width: 50px;
  height: 50px;
  background: yellow;
  cursor: pointer;
}
.selected {
  border-bottom: 3px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar" class="hide">delete selected images?</div>
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Ll2fJdBTPQylZO0Z4JQ9rtsIJsojwBxn.png" alt="">
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/lYG2Mgzz878Z8rU3yvlx9MwmR5dhDsyy.png" alt="">
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Zp2VXCJxT764bqDPyyIy0Yf2ZRFHzr3g.png" alt="">

相关内容

最新更新

热门标签：