Toggle a jQuery bar based on the presence of a specific CSS class

Question

Toggle a jQuery bar based on the presence of a specific CSS class

I am working on a feature where I can select and deselect images by clicking on a delete button. When an image is selected, a bar appears at the top. If I click the same delete button again, the image should be deselected and the bar should disappear. This behavior should also work for multiple selections and removals.

To achieve this functionality, I have implemented logic to add a "selected" class on click and remove it when clicked again.

Subsequently, I count the number of elements with the "selected" class to determine if the top bar should be hidden or shown.

However, I always get a count of 0 regardless of the selected images.

If you could help me identify what I am missing in my code, that would be greatly appreciated!

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

javascript jquery html css

Answer 1

Answer №1

It is recommended to utilize the following code snippet:

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

Instead of using:

var selection = selected.length;

This is because the statement var selected = $('.selected'); will store all elements with the 'selected' class in the variable selection. If there are no elements with this class, it will result in a count of 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="">

Answer 2

It is recommended to utilize the following code snippet:

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

Instead of using:

var selection = selected.length;

This is because the statement var selected = $('.selected'); will store all elements with the 'selected' class in the variable selection. If there are no elements with this class, it will result in a count of 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="">

Answer 3

Answer №2

Before applying the class on the element causing the error, make sure to move the selection of the .selected class inside the delete button as shown below:

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

Answer 4

Before applying the class on the element causing the error, make sure to move the selection of the .selected class inside the delete button as shown below:

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

Answer 5

Answer №3

The selected state needs to be defined within the event handler function. Here is an example of how you can handle this in your JavaScript file:

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'); // Make sure to include these lines
  var selection = selected.length;

  if (bar.hasClass("hide")) {
    bar.addClass("show");
  } else {
    if (selection === 0) {
      bar.removeClass("barShowY");
    }
  }

  console.log(selection + " images are currently selected");
});

To see it in action, visit CodePen https://codepen.io/anon/pen/zPMNeX?editors=1111
or try it on JSBin http://jsbin.com/cifekojasu/edit?js,console,output

Answer 6

The selected state needs to be defined within the event handler function. Here is an example of how you can handle this in your JavaScript file:

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'); // Make sure to include these lines
  var selection = selected.length;

  if (bar.hasClass("hide")) {
    bar.addClass("show");
  } else {
    if (selection === 0) {
      bar.removeClass("barShowY");
    }
  }

  console.log(selection + " images are currently selected");
});

To see it in action, visit CodePen https://codepen.io/anon/pen/zPMNeX?editors=1111
or try it on JSBin http://jsbin.com/cifekojasu/edit?js,console,output

Answer 7

Answer №4

I have made adjustments to the code and it seems to be producing the desired results

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

  if (selection === 0) {
     bar.removeClass("show");
     bar.addClass("hide");
  }
}

Did you mean for barShowY to be simply show?

Check out the Codepen snippet here : https://codepen.io/anon/pen/dZQNxM

Answer 8

I have made adjustments to the code and it seems to be producing the desired results

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

  if (selection === 0) {
     bar.removeClass("show");
     bar.addClass("hide");
  }
}

Did you mean for barShowY to be simply show?

Check out the Codepen snippet here : https://codepen.io/anon/pen/dZQNxM

Answer 9

Answer №5

Upon loading the document, the quantity of selected images is captured and cached. Consequently, this results in always obtaining the same number (0). To ensure live updates, it's essential to recalculate the quantity upon each click.

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://image-url-1.png" alt="">

<div class="delete">delete</div>
<img src="https://image-url-2.png" alt="">

<div class="delete">delete</div>
<img src="https://image-url-3.png" alt="">

Answer 10

Upon loading the document, the quantity of selected images is captured and cached. Consequently, this results in always obtaining the same number (0). To ensure live updates, it's essential to recalculate the quantity upon each click.

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://image-url-1.png" alt="">

<div class="delete">delete</div>
<img src="https://image-url-2.png" alt="">

<div class="delete">delete</div>
<img src="https://image-url-3.png" alt="">

Toggle a jQuery bar based on the presence of a specific CSS class

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating a primary index file as part of the package building process in a node environment

Create a nested array of subcategories within an array object

No invocation of useEffect

Using Laravel: Validate username existence with jQuery AJAX before form submission

Creating a seamless user experience with Jquery validation, ajax, and php without the need for

Tips for uploading an image to a .NET Webservice with Ajax on Internet Explorer 8

Unlocking the potential of input values in Angular.jsDiscovering the secret to

What is the best way to customize the MenuProps of Material UI Select component using createTheme?

After attempting to install @mui/system, I encountered an error. I decided to uninstall it, but now I am consistently facing this

The button in Bootstrap 4 that triggers the modal stays in a highlighted or clicked state even after the modal has been

Is it possible to use a Proxy-object instead of just an index when changing tabs in material-ui/Tabs?

Retrieving selected option value in React

Create a responsive DIV element within a website that is not originally designed to be responsive

Using Jquery to toggle a class on click, and dynamically change based on the screen size

Trigger javascript function with a button click

Troublesome code with Ajax, Jquery, and PHP is causing issues

What is the method for displaying data from a JSON file that is associated with the wallet address of the authenticated user in next.js?

How to hide or remove an element in jQuery depending on an attribute change

Ever since updating my Node JS, the functionality of the MaterializeCSS carousel methods has ceased to work

Is there a specific event in Angular.js that triggers when the $scope digest cycle is completed or when the view is refreshed?