Question

我有这个包含5 div的html页面：

<body>
    <div id='elementToClick'></div>
    <div id='elem0'></div>
    <div id='elem1'></div>
    <div id='elem2'></div>
    <div id='elem3'></div>

    <script src='all.js' rel='script'></script>
    <script src='page1.js' rel='script'></script>
    <script src='page2.js' rel='script'></script>
    <script src='page3.js' rel='script'></script>
</body>

和4 .js文件。 all.js文件是“正常”，它创建两个正方形（一个黑色）和一个红色。其他3 .js文件（page1.js，page2.js，page3.js）各自创建一个正方形并使用IIFE方法。

我想要的是当用户点击黑色方块时，其他4个方块会改变颜色（从浅色到深色）。

Here is the complete code

此代码不起作用，因为颜色仅更改为最后一个方块而不更改为其他方块。为什么呢？

Answer 1

问题是最后一个eventListener（elementToClick.on('click', function () { … });）会覆盖其他的。要解决此问题，您必须将所有内容放在一个 eventListener函数中。

您的代码（介意我的赞扬和控制台！）：

＆＃13;

// all.js

var currentFill = 'normal';

var elem0 = d3.select('#elem0')
	.append('svg')
	.append('g')
	.append('rect')
	.attr('id', 'elem0rect')
	.attr('width', 50)
	.attr('height', 50)
	.attr('fill', 'red');

var elementToClick = d3.select('#elementToClick')
	.append('svg')
	.append('g')
	.append('rect')
	.attr('id', 'elemToClickId')
	.attr('width', 100)
	.attr('height', 100)
	.attr('fill', 'black');

elementToClick.on('click', function() {
    console.log('#elem0 changed');
    if(currentFill == 'dark') {
      //currentFill = 'normal';
      d3.select('#elem0rect').attr('fill', 'red');
    } else {
      //currentFill = 'dark';
      d3.select('#elem0rect').attr('fill', 'darkred');
    }
	});
  
// -> If you would click on #elementToClick now, the #elem0 would change its color.


// page1.js

(function page1() {

var elem1 = d3.select('#elem1')
	.append('svg')
	.append('g')
	.append('rect')
	.attr('id', 'elem1rect')
	.attr('width', 50)
	.attr('height', 50)
	.attr('fill', 'cyan');

elementToClick.on('click', function() {
    console.log('#elem1 changed');
    if(currentFill == 'dark') {
      d3.select('#elem1rect').attr('fill', 'cyan');
      currentFill = 'normal';
    } else {
      d3.select('#elem1rect').attr('fill', 'darkcyan');
      currentFill = 'dark';
    }
  });

})();
  
// -> If you would click on #elementToClick now, only #elem1 would change its color.

// page2.js
(function page2() {

var elem2 = d3.select('#elem2')
	.append('svg')
	.append('g')
	.append('rect')
	.attr('id', 'elem2rect')
	.attr('width', 50)
	.attr('height', 50)
	.attr('fill', 'violet');

elementToClick.on('click', function() {
    console.log('#elem2 changed');
    if(currentFill == 'dark') {
      d3.select('#elem2rect').attr('fill', 'violet');
      currentFill = 'normal';
    } else {
      d3.select('#elem2rect').attr('fill', 'darkviolet');
      currentFill = 'dark';
    }
	});

})();

// -> If you would click on #elementToClick now, only #elem2 would change its color.


// page3.js
(function page3() {

var elem2 = d3.select('#elem3') // 'var elem3' instead of 'var elem2'!!!
	.append('svg')
	.append('g')
	.append('rect')
	.attr('id', 'elem3rect')
	.attr('width', 50)
	.attr('height', 50)
	.attr('fill', 'GreenYellow');

elementToClick.on('click', function() {
    console.log('#elem3 changed');
    if(currentFill == 'dark') {
      d3.select('#elem3rect').attr('fill', 'GreenYellow');
      currentFill = 'normal';
    } else {
      d3.select('#elem3rect').attr('fill', 'lime');
      currentFill = 'dark';
    }
	});

})();

// -> If you click on #elementToClick, only #elem3 will change its color (see console).

＆＃13;

<head>
	<meta charset='utf-8'>
	<script src='https://d3js.org/d3.v5.js'></script>
</head>

<body>

	<div id='elementToClick'></div>
	<div id='elem0'></div>
	<div id='elem1'></div>
	<div id='elem2'></div>
	<div id='elem3'></div>
    
</body>

＆＃13;

单击几个文件来管理事件

1 个答案: