Jquery - Select and deselect elements on the page

Question

Jquery - Select and deselect elements on the page

Navigation

#1 by (1 votes)

1

I have a screen with several divs that are draggable.

However, when the user clicks on them, I need to create a border around them and add some options (delete, for example).

But when I clicked off this element, I want it to come out of that border, and also to drop the options.

I'm trying the following way, but instead of grabbing what was clicked, it takes the document:

$(document).click(function() {

var objeto = $(this);

if( objeto.prop('class') == "adesivo" ||  objeto.prop('class') == "quadro")
{
    selecionaElemento(objeto);
}
else
{
    deselecionaElementos();
}});

The selecionaElemento(objeto) function does the following:

function selecionaElemento(objeto){
  objeto.css("border", "1px solid #F00");
}

And the deselectsElements () does the following:

function deselecionaElementos(){
   $('.adesivo').css("border", "none");
   $('.quadro').css("border", "none");
}

What am I doing wrong that instead of picking up the element it gets the document?

javascript jquery

asked by anonymous 15.09.2017 / 18:22

1 answer

How to leave a clickable pie chart Slow bash script

score 1 · Accepted Answer

Indicates a jQuery event to add a class to the clicked element, and remove it from all and adds one to $ (this).

$(document).on('click','.div',function(){
  var $this = $(this);
  $('.div').removeClass('selected');
  $this.addClass('selected');
});

$('body').click(function() {
  $('.div').removeClass('selected');
});

.div{
width:40px;
height:40px;
background-color:#ccc;
border:1px solid #000;
}
.selected{

background-color:#222;
border:1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='div'>1</div>
<div class='div'>2</div>
<div class='div'>3</div>
<div class='div'>4</div>