Как изменить класс и текст одного тега, нажав на другой тег?

Question

Я не знаю, как описать это, не делая его более сложным.
Итак, посмотрите на результат кода и нажмите на первую ссылку с «Показывать», затем вторую и третью.
Когда вторая ссылка нажата, первая закрывается, но текст остается «Спрятать», и я хочу, чтобы он изменился на «Показать».
Итак, при нажатии ссылки обнаружите, есть ли у какой-либо другой ссылки текст «Скрыть» и измените ее на «Показать».
И, пожалуйста, не JQuery ...

document.getElementsByClassName("show")[0].onclick = function() { 
 
    var x = document.getElementsByClassName("hide")[0]; 
 
    var y = document.getElementsByClassName("show")[0]; 
 
    if (x.classList.contains("visible")) { 
 
    x.classList.remove("visible"); 
 
    y.textContent = "Show"; 
 
    } else { 
 
    closeOther(); 
 
    x.classList.add("visible"); 
 
    y.textContent = "Hide"; 
 
    } 
 
}; 
 

 
document.getElementsByClassName("show")[1].onclick = function() { 
 
    var x = document.getElementsByClassName("hide")[1]; 
 
    var y = document.getElementsByClassName("show")[1]; 
 
    if (x.classList.contains("visible")) { 
 
    x.classList.remove("visible"); 
 
    y.textContent = "Show"; 
 
    } else { 
 
    closeOther(); 
 
    x.classList.add("visible"); 
 
    y.textContent = "Hide"; 
 
    } 
 
}; 
 

 
document.getElementsByClassName("show")[2].onclick = function() { 
 
    var x = document.getElementsByClassName("hide")[2]; 
 
    var y = document.getElementsByClassName("show")[2]; 
 
    if (x.classList.contains("visible")) { 
 
    x.classList.remove("visible"); 
 
    y.textContent = "Show"; 
 
    } else { 
 
    closeOther(); 
 
    x.classList.add("visible"); 
 
    y.textContent = "Hide"; 
 
    } 
 
}; 
 

 
function closeOther() { 
 
    var visible = document.querySelectorAll(".visible"), 
 
    i, l = visible.length; 
 
    for (i = 0; i < l; ++i) { 
 
    visible[i].classList.remove("visible"); 
 
    } 
 
}

.style { 
 
    background-color: yellow; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
} 
 

 
.hide { 
 
    background-color: red; 
 
    width: 50px; 
 
    height: 50px; 
 
    display: none; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
.hide.visible { 
 
    display: block; 
 
}

<div class="style"> 
 
    <a href="#" class="show">Show</a> 
 
    <div class="hide"> 
 

 
    </div> 
 
</div> 
 
<div class="style"> 
 
    <a href="#" class="show">Show</a> 
 
    <div class="hide"> 
 

 
    </div> 
 
</div> 
 
<div class="style"> 
 
    <a href="#" class="show">Show</a> 
 
    <div class="hide"> 
 

 
    </div> 
 
</div>

Answer 1

Как this?

Просто добавил следующее closeOther():

visible = document.querySelectorAll(".show"), 
i, l = visible.length; 
for (i = 0; i < l; ++i) { 
visible[i].textContent="Show"; 
} 

Answer 2

Я пытался написать решение, которое не использовал JavaScript на всех и работали с помощью CSS в одиночку. Я не мог заставить его работать, хотя CSS может идентифицировать focus, но он не может идентифицировать blur (т. Е. Когда focus только что был удален).

Так вот решение, которое использует яваскрипт и в classList API, вместо:

var divs = document.getElementsByTagName('div'); 
 

 
function toggleFocus() { 
 

 
    for (var i = 0; i < divs.length; i++) { 
 
     if (divs[i] === this) continue; 
 
     divs[i].classList.add('show'); 
 
     divs[i].classList.remove('hide'); 
 
    } 
 

 
    this.classList.toggle('show'); 
 
    this.classList.toggle('hide'); 
 
} 
 

 
for (let i = 0; i < divs.length; i++) { 
 
    divs[i].addEventListener('click', toggleFocus, false); 
 
}

div { 
 
display: inline-block; 
 
position: relative; 
 
width: 140px; 
 
height: 140px; 
 
background-color: rgb(255,255,0); 
 
} 
 

 
.show::before { 
 
content: 'show'; 
 
} 
 

 
.hide::before { 
 
content: 'hide'; 
 
} 
 

 
div::before { 
 
color: rgb(0,0,255); 
 
text-decoration: underline; 
 
cursor: pointer; 
 
} 
 

 
.hide::after { 
 
content: ''; 
 
position: absolute; 
 
top: 40px; 
 
left: 40px; 
 
width: 50px; 
 
height: 50px; 
 
background-color: rgb(255,0,0); 
 
}

<div class="show"></div> 
 
<div class="show"></div> 
 
<div class="show"></div>