CODEWITHSUNDEEP
javascriptjqueryhtmlcss
tryintolearn
tryintolearn

Reputation: 53

background image toggle only on single image

The above is a fiddle in which i want to toggle or show/hide the background image(i.e. tick mark) onclick and also select the following offer in database (mysql). I am able to show the tick mark but not hide it. Please help.

$(function() {
 $('.listing-content').click(function() {
  $(this).css('background-image', 'url(https://i.sstatic.net/Kg1Do.png)');
 });
})

When a listing-content element is clicked, I need the other listing-content elements to have the background image removed also? So no more than one is ticked at a time?

Upvotes: 0

Views: 36

Answers (2)

Armin Nikdel
Armin Nikdel

Reputation: 335

You need a control to check if CSS image is set. Look here for demo: https://jsfiddle.net/kpsbbjk4/

$(function() {
 $('.listing-content').click(function() {

 //this code to control and untick current clicked item if it is ticked
 if ($(this).css('background-image')=='url("https://i.sstatic.net/Kg1Do.png")'){
  $(this).css('background-image', '');

 }else{
  //this code to remove all css images so that new item get ticked
 $('.listing-content').css('background-image', '');

  $(this).css('background-image', 'url("https://i.sstatic.net/Kg1Do.png")'); 
  }

 });
})

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

On .listing-content click, execute this:

$(document).on('click', '.listing-content', function() {
  $('.listing-content').css('background-image', '');
  $(this).css('background-image', 'url(https://i.sstatic.net/Kg1Do.png)');
});

or

$('.listing-content').removeAttr('style'); //removes all inline css

Upvotes: 0

Related Questions