Doubt with logic to select div

Question

Doubt with logic to select div

Navigation

#1 by (1 votes)

0

I have the following problem, when I click on a div it should be with the background-color black and the color of the background color, it is working normally, but only when you click on a div just once, in the second click the div that is clicked does not lose the opacity , there would be some way to solve this:

$(function() {
  $('.grade:eq(1)').on('click', () => {
     $('.grade:eq(1)').css({
        'background-color': '#000',
        'color': '#EC0080',
        'filter': 'opacity(1)' 
     }) 
     $('.grade:eq(0)').css({
        'background-color': '#009ADE',
        'color': '#FFF',
    	'filter': 'opacity(0.4)'
     }).mouseenter(() => {
        $('.grade:eq(0)').css('filter','opacity(1)')
     }).mouseleave(() => {
        $('.grade:eq(0)').css('filter','opacity(0.4)')
     })
     $('.grade:eq(2)').css({
        'background-color': '#FFEA00',
        'color': '#FFF',
    	'filter': 'opacity(0.4)'
     }).mouseenter(() => {
        $('.grade:eq(2)').css('filter','opacity(1)')
     }).mouseleave(() => {
        $('.grade:eq(2)').css('filter','opacity(0.4)')
     })
  })
  
  $('.grade:eq(2)').on('click', () => {
     $('.grade:eq(2)').css({
        'background-color': '#000',
        'color': '#FFEA00',
        'filter': 'opacity(1)'
     })
     $('.grade:eq(1)').css({
        'background-color': '#EC0080',
        'color': '#FFF',
    	'filter': 'opacity(0.4)'
     }).mouseenter(() => {
        $('.grade:eq(1)').css('filter','opacity(1)')
     }).mouseleave(() => {
        $('.grade:eq(1)').css('filter','opacity(0.4)')
     })
     $('.grade:eq(0)').css({
        'background-color': '#009ADE',
        'color': '#FFF',
    	'filter': 'opacity(0.4)'
     }).mouseenter(() => {
        $('.grade:eq(0)').css('filter','opacity(1)')
     }).mouseleave(() => {
        $('.grade:eq(0)').css('filter','opacity(0.4)')
     })
  })
  
  $('.grade:eq(0)').on('click', () => {
     $('.grade:eq(0)').css({
        'background-color': '#000',
        'color': '#009ADE',
        'filter': 'opacity(1)' 
     })
	$('.grade:eq(1)').css({
        'background-color': '#EC0080',
        'color': '#FFF',
        'filter': 'opacity(0.4)'
    }).mouseenter(() => {
        $('.grade:eq(1)').css('filter','opacity(1)')
    }).mouseleave(() => {
        $('.grade:eq(1)').css('filter','opacity(0.4)')
    })
    $('.grade:eq(2)').css({
        'background-color': '#FFEA00',
        'color': '#FFF',
        'filter': 'opacity(0.4)'
    }).mouseenter(() => {
        $('.grade:eq(2)').css('filter','opacity(1)')
    }).mouseleave(() => {
        $('.grade:eq(2)').css('filter','opacity(0.4)')
    })

  }) 
})

.grades {
    width: 350px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
}
.grade {
    width: 100px;
    height: 100px;
    margin: 5px;
    color: #FFF;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}
.grade:nth-child(3n+1) {
    background-color: #009ADE;
    filter: opacity(0.4);
}
.grade:nth-child(3n+2) {
    background-color: #EC0080;
    filter: opacity(0.4);
}
.grade:nth-child(3n+3) {
    background-color: #FFEA00;
    filter: opacity(0.4);
}
.grade:nth-child(3n+1):hover {
    filter: opacity(1);
}
.grade:nth-child(3n+2):hover {
    filter: opacity(1);
}
.grade:nth-child(3n+3):hover {
    filter: opacity(1);
}
.grade:nth-last-child(2) {
    background-color: #000;
    color: #EC0080;
    filter: opacity(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="grades">
   <div class="grade">21h</div>
   <div class="grade">22h</div>
   <div class="grade" id="escolhido">23h</div>
</div>

jquery html5 css3

asked by anonymous 28.10.2018 / 15:20

1 answer

How to check if an id exists on the [duplicate] page How to convert a hexadecimal character to Assembly

score 1 · Accepted Answer

Ola LeAndrade all right? To do the selected work I found it better to include a ".choose" class that contains all the css, so when I click on a ".grade" I remove all ".choose" classes.

$('.grade').removeClass('escolhido')

So I only include in that grid clicked

$(this).addClass('escolhido')

When the problem you were experiencing in your code was due to the mouseenter and mouseleave I hope I have helped

$(function() {
  $('.grade').on('click', function() {
    $('.grade').removeClass('escolhido')
    $(this).addClass('escolhido')
  })
})

.grades {
    width: 350px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
}
.grade {
    width: 100px;
    height: 100px;
    margin: 5px;
    color: #FFF;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}
.grade:not(.escolhido) {
    filter: opacity(0.4);
}
.grade:nth-child(3n+1) {
    background-color: #009ADE;
}
.grade:nth-child(3n+2) {
    background-color: #EC0080;
}
.grade:nth-child(3n+3) {
    background-color: #FFEA00;
}
.grade:hover {
    filter: opacity(1);
}
.grade:nth-child(3n+1).escolhido {
    color: #009ADE;
}
.grade:nth-child(3n+2).escolhido {
    color: #EC0080;
}
.grade:nth-child(3n+3).escolhido {
    color: #FFEA00;
}
.grades .escolhido {
    background-color: #000;
    filter: opacity(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="grades">
   <div class="grade">21h</div>
   <div class="grade">22h</div>
   <div class="grade escolhido">23h</div>
</div>