图像边框会在点击时改变

Question

I have 5 images in the same div id="palettes", I want all images to have 3px solid grey border, the one clicked change to black.

The code works, but when I click any of this 5 images inside the div the javascript add 3px solid grey to all images in the page not only in the div I want. How do I specify this in the code?

  $('#palettes img').click(function () { $('img').not($(this)).css({'border':'3px solid grey'}); $(this).css({'border':'3px solid black'}); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="palettes"> <a href="javascript:;"><img style="border: 3px solid grey;" src="palette1.jpg"/></a> <a href="javascript:;"><img style="border: 3px solid grey;" src="palette2.jpg"/></a> <a href="javascript:;"><img style="border: 3px solid grey;" src="palette3.jpg"/></a> <a href="javascript:;"><img style="border: 3px solid grey;" src="palette4.jpg"/></a> <a href="javascript:;"><img style="border: 3px solid grey;" src="palette5.jpg"/></a> </div> 

Answer 1

Bah, I just fixed it. Sorry.

$('#palettes img').click(function () {
    $('#palettes img').not($(this)).css({'border':'3px solid grey'});
    $(this).css({'border':'3px solid black'});
});

Answer 2

You can use children element to access to all children of an element:

  $('#palettes img').click(function () {
     $( '#palettes' ).children( 'img' ).css( {'border':'3px solid grey'} );
    });

<div id="palettes">
    <a href="javascript:;"><img style="border: 3px solid grey;" src="palette1.jpg"/></a>
    <a href="javascript:;"><img style="border: 3px solid grey;" src="palette2.jpg"/></a>
    <a href="javascript:;"><img style="border: 3px solid grey;" src="palette3.jpg"/></a>
    <a href="javascript:;"><img style="border: 3px solid grey;" src="palette4.jpg"/></a>
    <a href="javascript:;"><img style="border: 3px solid grey;" src="palette5.jpg"/></a>
</div>