J'essaie de changer la couleur d'arrière-plan du bouton A en couleur 1 lorsque vous cliquez dessus et en même temps de définir la couleur du bouton B sur la couleur 2.

Même chose en cliquant sur le bouton B.

La chose surprenante est que le code des blocs de remorquage est totalement symétrique, mais un bloc fonctionne mais un autre bloc ne fonctionne pas.

Comment est-ce possible?

Dans mon 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);                     

}
dans mon 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>`
-1
adam 18 mars 2019 à 21:40

2 réponses

Meilleure réponse

C'est peut-être quelque chose comme ça. Vous pouvez inclure jQuery si vous le souhaitez.

Il serait préférable d'utiliser des classes CSS et de les affecter dynamiquement au lieu de modifier directement l'attribut de style des éléments.

Les variables de ce script sont globales car une fermeture externe est supposée.

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 : Au cas où deux couleurs prédéterminées devraient être inversées, le code pourrait également ressembler à :

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

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

const switchColors = () => {

    colors.reverse();

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

};
0
Igor Bykov 19 mars 2019 à 00:04

Vous pouvez le faire simplement en utilisant addClass() et 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>
0
ttulka 18 mars 2019 à 19:22