Question

我有一个带有删除按钮的动态数量的图像。第一次单击删除按钮时，图像被选中，顶部显示一个条形。如果我再次单击相同的按钮，图像将被取消选中，顶部栏将再次消失。多次选择/删除选择也会发生同样的情况。

我尝试通过在点击（选定）上添加一个类并在再次单击时删除它来实现此目的。

然后我计算了班级的长度（存在多少），如果等于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="">

Answer 1

您应该使用：

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

而不是：

var selection = selected.length;

由于表达式var selected = $('.selected');将保存selection变量中所选类的所有元素，而当此类没有元素时，这就是为什么我将保持计数为零的原因。

希望这有帮助。

＆＃13;

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");

});

＆＃13;

#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;
}

＆＃13;

<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="">

＆＃13;

Answer 2

您在将该类应用于导致错误的主要原因的元素之前选择.selected类，将其移到删除按钮内部，请参阅下面的

＆＃13;

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");

  });
})

＆＃13;

#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;
}

＆＃13;

<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="">

＆＃13;

Answer 3

我修改了以下内容，我似乎得到了你期待的结果

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

Answer 4

应在事件处理程序中声明

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"); });。这应该是你的JS文件：

{{1}}

在CodePen https://codepen.io/anon/pen/zPMNeX?editors=1111中查看或者在JSBin http://jsbin.com/cifekojasu/edit?js,console,output

上

Answer 5

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

＆＃13;

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");
});

＆＃13;

#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;
}

＆＃13;

<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="">

＆＃13;

jQuery显示/隐藏栏取决于css类

5 个答案: