change color only of clicked element

Asked

Viewed 565 times

0

I need to change the color only of the element that was clicked, in case change the background color of the div - the same and cloned several times creating more div in html depending on how much is needed - in all cases that I did using Parent and siblings did not get success , all remain changing color, need only the clicked div change color, and the others remain with the standard color.

     **Icon**
   <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down">
    </i>
    </a>

    <div class="panel-group" id="accordion">
        <div class="panel panel-default task">
            <div class="panel-heading  taskToDo">
                <span class="col-sm-8 taskTitle">
                    <span class="checkTask"><i class="fa fa-check" aria-hidden="true"></i></span>
                    descricao
                </span>
    </div>
       </div>
          </div>
       JS
       $(".taskIcon").on("click", function () {
       $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
       $(".boxTipoDeAtividade").hide();
       $(".taskAtividades").addClass("glyphicon-chevron-down"); 
       **$(".taskToDo").addClass("taskToDoBackground");**
       });
       CSS 
       .taskToDoBackground{
       background-color: #efefef !important;
        }
jquery

  • Tried passing parameters? Type: function (numerar por exemplo os botões ) the onClick? 1 onclick button - change color of specific parameter.

  • Marcelo, you can show the parent element of <div class="taskToDo">?

  • posted the rest

  • Now he’s even more confused. Is there any common father among <a> and . taskToDo? this HTML repeats itself several times on the right page?

  • yes repeat several times

  • I saw that you removed the other question. I was going to answer but it’s gone :)

  • Is there any common father among <a> and . taskToDo that obeys this repetition?

  • I was going to rephrase, however I thought it didn’t fit properly, sorry

Show 3 more comments

1 answer

1


$(this).closest(".taskToDo").addClass("taskToDoBackground");

When you make the $(".taskToDo"), this selector returns all elements with this class. you have to use the . Closest() to return only the nearest first element.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.