页面中存在多个div，如何实现单击实现取得其中一个的值！

Posted 2023-04-26

比如<div id=1>1</div><div id=2>2</div><div id=3>3</div><div id=4>4</div>,在其中添加onclick事件，指向同一个方法，如何实现单击取得单击的那个div的值！

参考技术A 三个方法。DOM0级，DOM2级。
网上流传最广的DOM0级
<div
id="a"
onclick="f(this);">1</div>
function
f(e)
alert(e.innerhtml);

把this当做参数传入然后调用。
第二个算是混合类型的。严格来说不算是DOM2级。
function
f()
alert(event.srcElement.innerHTML);

<div
id="a"
onclick="f();">1</div>
获取事件源。
这里有兼容问题。IE用srcElement。FF用的是target。而且如果要在FF运行需要把event当做参数写入。如：
<div
id="a"
onclick="f(event);">1</div>
function
f(e)
alert(e.target.innerHTML);

第三个方法DOM2级的。
<div
id="a">1</div>
function
addEv(obj,ev,fn)
if(obj.attachEvent)//IE模型
obj.attachEvent("on"+ev,function()
fn.call(obj);
);
else
if(obj.addEventListener)//W3C模型
obj.addEventListener(ev,function()
fn.call(obj);
,false);
else
obj["on"+ev]
=
fn;


var
t
=
document.getElementById('a');
addEv(t,'click',function()
alert(this.innerHTML);
);
一般类库和高手都用这种写法。
第一个缺点就是如果不加call
IE就会把this指向window。我做了点修改让他this指向当前对象了。还有一个缺点就是无法删除匿名函数写的事件。
obj.attachEvent("on"+ev,function()
fn.call(obj);
);
可以把这个function写到一个单独的函数中就可以删除了。不过this就不会指向当前的对象了。
如果想做的完美可以搜索detachEvent匿名函数或attachEvent匿名函数。
如果还不懂可以M我。

如何更改在 ngFor 中单击的每个 div 的背景颜色？

【中文标题】如何更改在 ngFor 中单击的每个 div 的背景颜色？

【英文标题】：How do I change the background color of every div clicked inside ngFor?

【发布时间】：2022-01-23 09:24:24

【问题描述】：

我目前在 ngFor 中有一些自定义过滤器芯片，目前我将它们设置为一次只允许一个芯片在您单击它时更改背景颜色。我想更改此设置，以便我可以选择多个芯片并让其中多个芯片在选择时更改背景颜色。我应该如何处理？

HTML：

<div *ngFor="let category of categories; let i = index" class=" filter-chips px-3"
    (click)="active = i; chipAdded(category)" [ngClass]="active === i ? 'chip-clicked': '' ">
      category
</div>

组件：

active: any;

CSS：

.filter-chips 
  min-width: 50px;
  height: 30px;
  background-color: grey;
  border: 1px solid $grey-04;
  box-sizing: border-box;
  border-radius: 24px;
  text-align: center;
  color: $grey-02 !important;
  cursor: pointer;


.chip-clicked 
  background-color: green;
  color: white !important;
  border-color: white !important;

【参考方案1】：

试试下面的代码。

onChildSelect(Child)

    for (let myChild of this.children) 
        myChild.BackgroundColour = "white";
    

    Child.BackgroundColour = "red";

<li style="cursor: pointer" class="list-group-item" 
    *ngFor="let Child of children" (click)="onChildSelect(Child)" 
    [style.background-color]="Child.BackgroundColour" >

【参考方案2】：

您可以将active 更改为一组数字，以跟踪所有选定的categories。然后你可以用active.includes(i)检查category是否被选中。

TypeScript 文件：

public categories = ['Category 1', 'Category 2', 'Category 3'];
public active: number[] = [];

chipAdded(index: number): void 
  if (this.active.includes(index)) 
    this.active = this.active.filter((item) => item !== index);
   else 
    this.active.push(index);
  

HTML 文件：

<div *ngFor="let category of categories; let i = index" class="filter-chips px-3"
  (click)="category.active = true; chipAdded(category)" [ngClass]="category && category.active ? 'chip-clicked': '' ">
    category
</div>

Working example