Изменить css стиль блока учитывая data-параметр
Здравствуйте! Такая ситуация:
Есть список, к примеру: <ul> <li class="someclass1" data-address="Moscow"></li> <li class="someclass1" data-address="Rome"></li> <li class="someclass1" data-address="Baku"></li> </ul> и есть три блока: <div class="someclass2" data-address="Moscow"></div> <div class="someclass2" data-address="Rome" style="display: none;"></div> <div class="someclass2" data-address="Baku" style="display: none;"></div> Можно ли сделать так, чтобы при клике на одну из "лишек", блок с таким же data-параметром становился видимым, а остальные наоборот. |
<ul>
<li class="someclass1" data-address="Moscow">mosc</li>
<li class="someclass1" data-address="Rome">asd</li>
<li class="someclass1" data-address="Baku">dsa</li>
</ul>
<div class="someclass2" data-address="Moscow" style="display: none;">asdasd</div>
<div class="someclass2" data-address="Rome" style="display: none;">dasdasdasdasd</div>
<div class="someclass2" data-address="Baku" style="display: none;">zasdad</div>
<script>
var controls=document.querySelectorAll('.someclass1[data-address]'),
targets=[].slice.call(document.querySelectorAll('.someclass2[data-address]'));
[].forEach.call(controls,function(node){
node.onclick=function(){
var address=node.dataset.address;
targets.forEach(function(item){
item.style.display=
['none','block'][+(item.dataset.address==address)];
});
};
});
controls[0].click();
</script>
|
Nexus,
Лучше выглядит, если <div class="someclass2" data-address="Moscow" style="display: none;">asdasd</div> тоже, как и другие. |
Dilettante_Pro, согласен, поправил.
|
:lol:
эта музыка будет вечной ... https://javascript.ru/forum/showthread.php?p=337899 ... а также ещё и ещё и ещё ... искать "открывашка" |
| Часовой пояс GMT +3, время: 21:17. |