Выберите одно изображение при нажатии тега <img>

Я визуализировал несколько изображений, используя тег. Я хочу изменить цвет фона изображения при нажатии. Но когда я нажимаю на одно изображение, цвет всех изображений меняется.

Вот мой код. Я работаю в Ангуляре.

HTML

<img
 [src] = "data.Url" alt = "image"
 (click) = "_upload(data.Url)" 
 [ngClass] = "{'green' : toggle, 'red': !toggle}"
>

тс

внутри моей функции

this.toggle = !this.toggle;
this.status = this.toggle ? 'Enable' : 'Disable';
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
47
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я предполагаю, что для рендеринга нескольких html-элементов вы используете директиву ngFor, поэтому вы можете использовать index для присвоения каждому элементу другого класса css.

Например:

HTML

<div *ngFor = "let option of options; let i = index">
 <img
   [src] = "option.Url"
   (click) = "_upload(option.Url, i)"
   [class.selected] = "i === indexSelected" <!--apply the selected css class if condition is TRUE-->
  >
</div>

css

.selected {
  background-color: green;
}

тс

...
export class YourComponent {
  indexSelected: number = -1;

  _upload(url: string, index: number) {
    // ...
    this.indexSelected = index;
  }
}

этот ответ был полезен. спасибо @Andres2142

Asra Waseem 07.04.2022 00:06

Спасибо всем я сделал это таким образом

<td *ngFor = "let data of responseData; let i= index;" (click) = "active= i" [ngStyle] = "{'background-color': active === i ? '#4b8df2' : 'white' }">
    <div>
    <img 
     [src] = "data.Url" alt = "image"
     (click) = "_upload(data.Url)" 
    >
    </div>
</td>

Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 07.04.2022 00:58

Другие вопросы по теме