CODEWITHSUNDEEP
javascriptjqueryhtml
d3bug_asking_answering
d3bug_asking_answering

Reputation: 231

How to select 2 image at the same time in javascript?

Hi I'm trying to learn how to select image and I've done this so far. I just don't get how to select 2 image at the same time because I already tried removing .removeClass('selected'); in the images_list li function.

HTML:

<div class="images_list">
  <li class="border" title="content_1">
      <img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
      <span>
          <img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
      </span>
    </li>
  <li class="border" title="content_2">
      <img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
      <span>
          <img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
      </span>
    </li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
  <div id="content_1" class="content hidden">content1</div>
        <div id="content_2" class="content hidden">content2</div>
      </div>

CSS

.images_list li {
    list-style: none;
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 10px;
}

.images_list li span {
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    width:24px;
    height:24px;    
}

.border {
    border: 6px solid #D8D8D8;
    background: url(upload/check.jpg);
}
.selected {
    border: 6px solid green;
    position:relative;
}
.hidden {
    display:none;
}
.images_list li.selected span {
    display:block;
}

JS: here's my JS where I'm having a problem with. I hope somebody can help me, Thanks!

$('.images_list li').click(function() {
            $('.images_list .selected').removeClass('selected');
            $(this).toggleClass('selected');
            var clicked = $(this).attr('title');
            $("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
        });

you can see my fiddle here: http://jsfiddle.net/jasonc21/59swswz7/

Upvotes: 1

Views: 382

Answers (1)

Snowmonkey
Snowmonkey

Reputation: 3761

Simply comment out the removeClass line entirely.

$('.images_list li').click(function() {
            // Left the following in, in case later you want to make it single again.
			// $('.images_list .selected').removeClass('selected');
			$(this).toggleClass('selected');
			var clicked = $(this).attr('title');
			$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
		});
.images_list li {
	list-style: none;
	float: left;
	width: 150px;
	height: 150px;
	margin-right: 10px;
}

.images_list li span {
    display:none;
	position:absolute;
    top:0px;
    left:0px;
	width:24px;
	height:24px;    
}

.border {
	border: 6px solid #D8D8D8;
	background: url(upload/check.jpg);
}
.selected {
	border: 6px solid green;
    position:relative;
}
.hidden {
    display:none;
}
.images_list li.selected span {
    display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_list">
  <li class="border" title="content_1">
      <img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
      <span>
          <img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
      </span>
    </li>
  <li class="border" title="content_2">
      <img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
      <span>
          <img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
      </span>
    </li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
  <div id="content_1" class="content hidden">content1</div>
        <div id="content_2" class="content hidden">content2</div>
      </div>

Upvotes: 1

Related Questions