Question

我试图在单击时将按钮A的背景颜色更改为颜色1，同时将按钮B的颜色设置为颜色2。

与单击按钮B时相同。

令人惊讶的是，两个代码块完全对称，但是一个代码块可以工作，而另一个代码块不能工作。

怎么可能？

在我的main_js中：

"function switchVisible_dgc() {

......

var color = '#3e8e41';

$("#dgc_click").css('background-color', color);
color='#325CA8';
$("#agc_click").css('background-color', color);

}

function switchVisible_agc() {
......

var color = '#3e8e41';

$("#agc_click").css('background-color', color);
color='#325CA8';
$("#dgc_click").css('background-color', color);

}
in my html:

<td width="0">

</td>
<td width="250">
<button class="button button5" 
onclick="switchVisible_agc()"id="agc_click">Agc</button>
</td>
</td>
<td width="250">
<button class="button button5" 
onclick="switchVisible_dgc()"id="dgc_click">Dgc</button>
</td>
</table>`

Answer 1

可能是这样的。如果需要，可以包括jQuery。

最好使用CSS类并动态分配它们，而不是直接修改元素的style属性。

此脚本中的变量是全局变量，因为假定有一些外部闭包。

const buttons = document.querySelectorAll(`.button5`);

const switchColors = colors => {

	buttons.forEach( (element, index) => {
		element.style = `background-color: ${colors[index]}`
	});
};

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example</title>
</head>
<body>
	</table>
		<td width="250">
			<button id="agc_click" class="button button5" onclick="switchColors(['red', 'blue'])">Agc</button>
		</td>
		<td width="250">
			<button id="dgc_click" class="button button5" onclick="switchColors(['green', 'yellow'])">Dgc</button>
		</td>
	</table>
</body>
</html>

UPD ：如果应该切换两种预定颜色，则代码也可能像这样：

const buttons = document.querySelectorAll(`.button5`);

const colors = [`#325CA8`, `#3E8E41`];

const switchColors = () => {

    colors.reverse();

    buttons.forEach( (element, index) => {
        element.style = `background-color: ${colors[index]}`
    });

};

Answer 2

您只需使用addClass()和removeClass()即可做到。

$('#agc_click').click(function(){
  $('#agc_click, #dgc_click').removeClass('b2');
  $('#agc_click, #dgc_click').addClass('b1');
});

$('#dgc_click').click(function(){
  $('#dgc_click, #agc_click').removeClass('b2');
  $('#dgc_click, #agc_click').addClass('b2');
});

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.b1 {
    background-color: red !important;
}

.b2 {
  background-color: blue !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <table>
    <tr>
      <td>
        <button class="button button5" id="agc_click">Agc</button>
      </td>
      <td>
        <button class="button button5" id="dgc_click">Dgc</button>
      </td>
    </tr>
  </table>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

在一个按钮onclick（）函数中设置另一按钮背景色

2 个答案: