There is a div with a class ('.item') , and in the div there is a button with a class ('.order') . There are several such div on the page. How to highlight the selected div by clicking on the .order ? (Change his background ).

  • What exactly is your problem? You do not know how to change the background? Or how to choose exactly the div in which the button? What have you tried to do, and with what specific difficulties did you have? - Xander
  • jsfiddle.net/soledar10/vyo4jk8s - soledar10
  • I figured out how to change the background on a click. How to get it back when you click on another button? - Questertre pm
  • one
    jsfiddle.net/soledar10/pkmyhuLz - soledar10

4 answers 4

jquery:

 $('.order').click(function() { $('div.item').css('background-color', 'inherit'); # сбрасываем background для всех $(this).parents('div.item').css('background-color', 'red'); });

jsfiddle

On css will not work, because we cannot change the properties of the parent and the click pseudo class does not exist.

     $(document).ready(function(){ $(".order").click(function(){ $(this).parent().css("background-color","green"); }) })

      Before adding a class, remove it from others

       $(document).ready(function(){ $('.order').on('click', function () { $('.item-active').removeClass('item-active'); $(this).parent().addClass('item-active'); }); });

      https://jsfiddle.net/nazarpunk/vyo4jk8s/2/

        To optimize the above examples, I would correct in this style:

         var highlight = 'active'; var $selector = $('.item').click(function() { $selector.parent().removeClass(highlight); $(this).parent.addClass(highlight); });