This question has already been answered:

Now when clicking on a picture with a blue border, boarders are painted in red for all blocks. How to make it so that when you click on a specific block, the stroke is colored only in it and the text goes back to not selected?

$('.div').click(function() { if ( !($('.div').hasClass('selected')) ) { $('.div').addClass('selected'); $('.p').text('selected text'); } else { $('.div').removeClass('selected'); } }); 
 .div { width: 100px; height: 100px; border: 1px solid blue; cursor: pointer; } .selected { border-color: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="div" style="background: url(http://lorempixel.com/output/people-qc-640-480-1.jpg)"></div><p class="p">not selected</p> <div class="div" style="background: url(http://lorempixel.com/output/people-qc-640-480-1.jpg)"></div><p class="p">not selected</p> <div class="div" style="background: url(http://lorempixel.com/output/people-qc-640-480-1.jpg)"></div><p class="p">not selected</p>

Reported as a duplicate at Grundy. javascript Jan 16 '18 at 6:24 am

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • can multiple units be selected at the same time? - Grundy

2 answers 2

You can do the following:

 $('.div').click(function() { var selectedBlock = $(this); // отбираем нажатый элемент $('.div').each(function() { // пробегаемся по всем блокам if (!$(this).is(selectedBlock)) { // Поиск всех НЕ выбранных элементов $(this).removeClass('selected'); // Убираем класс selected, так как он не выбран $(this).next().text('Not selected'); // Также отбираем следующий тэг после элемента, в нашем случае это тэг <p> сбрасываем на 'Not selected' } }); if (selectedBlock.hasClass('selected')) { // А теперь проверяем нажатый элемент selectedBlock.removeClass('selected'); selectedBlock.next().text('Not selected'); } else { selectedBlock.addClass('selected'); selectedBlock.next().text('Selected element'); } }); 
 .div { width: 100px; height: 100px; border: 1px solid blue; cursor: pointer; } .selected { border-color: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="div" style="background: url(http://lorempixel.com/output/people-qc-640-480-1.jpg)"></div> <p class="p">Not selected</p> <div class="div" style="background: url(http://lorempixel.com/output/people-qc-640-480-1.jpg)"></div> <p class="p">Not selected</p> <div class="div" style="background: url(http://lorempixel.com/output/people-qc-640-480-1.jpg)"></div> <p class="p">Not selected</p>

    The variant with the use of closures (if there are many elements and it is not advisable to go through them with the forEach() loop):

     var clicked = ''; // ссылка на кликнутый элемент $('.div').click(e => { if (clicked == e.target) { // если кликнут один элемент два раза let str = $(e.target).next().text() return $(clicked).toggleClass('selected').next().text(str == 'Selected' ? 'Not selected' : 'Selected') } $(clicked).removeClass('selected').next().text('Not selected') $(e.target).addClass('selected').next().text('Selected') clicked = e.target; // сохраняем ссылку на элемент в замыкании })