Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Новый style.color при текущем event (https://javascript.ru/forum/events/84105-novyjj-style-color-pri-tekushhem-event.html)

thislegion 03.06.2022 12:40

Новый style.color при текущем event
 
При нажатии на валюту в левой колонке подгружаются неактивные валюты и они меняют цвет на красный. Но если поменять на другие в hide_valuts.php и кликнуть повторно (без перезагрузки), то предыдущие сохраняют красный style.color. Но как сделать так, чтобы style.color меняли только подгружаемые валюты, а предыдущие деактивировались?

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-3.5.1.js'></script>
<style>
.leftable {background-color: white; }
.leftable td{border:1px solid #d6d6d6;padding:5px 5px 5px 10px;}
.tablinks {font-size:12px;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;}
.tablinks2 {font-size:12px;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;}
.tablinks:hover{cursor:pointer; color:white; background-color: black;}
.tablinks2:hover{cursor:pointer; color:white; background-color: black;}
.active {color:white;background-color: black;}
.dpblock tr {display: block}
.dpnone {display: none}
</style>
</head>
<body>  
<table class="leftable">
<tbody>
<tr class="dpblock"><td class="tablinks" onclick="click_valuta(event, 'BTC')">Bitcoin (BTC)</td><td id="BTC" class="tablinks2 " onclick="click_valuta2(event, 'BTC')">Bitcoin (BTC)</td></tr>
<tr class="dpblock"><td class="tablinks " onclick="click_valuta(event, 'BCH')">Bitcoin Cash (BCH)</td><td id="BCH" class="tablinks2 " onclick="click_valuta2(event, 'BCH')">Bitcoin Cash (BCH)</td></tr>
<tr class="dpblock"><td class="tablinks " onclick="click_valuta(event, 'ETH')">Ethereum (ETH)</td><td id="ETH" class="tablinks2 " onclick="click_valuta2(event, 'ETH')">Ethereum (ETH)</td></tr>
<tr class="dpblock"><td class="tablinks " onclick="click_valuta(event, 'ETC')">Ether Classic (ETC)</td><td id="ETC" class="tablinks2 " onclick="click_valuta2(event, 'ETC')">Ether Classic (ETC)</td></tr>
</tbody>
</table>
</body>
</html>

<script>

function click_valuta(evt,valuta) {
    
//window.valuta = valuta;//назначение глобальной переменной   

           $.ajax({
	              url: 'hide_valuts.php',         /* Куда пойдет запрос */
	              method: 'post',             /* Метод передачи (post или get) */
	              dataType: 'html',          /* Тип данных в ответе (xml, json, script, html). */
	              data: {valuta: valuta},     /* Параметры передаваемые в запросе. */
                  success: function(data){
		           //alert(data); 
		           //let arr = ['BTC','BCH'];// так работает
		           //let arr = ['ETH','ETC'];
		           let arr  = JSON.parse(data);
		           
		            arr.forEach(function(elem) {
		        
		            document.getElementById(elem).style.color = 'red';

		              });
		        
                  }
        });   


 let i, tablinks; 
 
 tablinks = document.getElementsByClassName("tablinks");
 
 for (i = 0; i < tablinks.length; i++) {
     
 tablinks[i].className = tablinks[i].className.replace(" active", "");
     
 }

evt.currentTarget.className += " active";
            
}
      
</script>


hide_valuts.php

$nocourses[] =  'BTC';
$nocourses[] =  'BCH';
//$nocourses[] =  'ETC';
//$nocourses[] =  'ETH';
echo json_encode($nocourses);


Часовой пояс GMT +3, время: 13:57.