Это может быть сделано с помощью нескольких операций:
1 - Получить элемент
Чтобы получить элемент существует пять способов сделать что:
document.getElementById('idName')document.getElementsByClassName('class name')[element index] (0 базовый индекс)document.getElementsByTagName('tag name')[element index] (0 базисный индекс)document.querySelectorAll('.class or #id or tag')[element index] (0 базисный индекс)document.querySelector('.class or #id or tag') (вернет первый элемент)
Например, мы получим элемент по имени класса:
var image = document.getElementsByClassName('high')[0];
Но [0] получите первое изображение, и мы должны получить все изображения, так что мы будем делать с переменной равно 0 и увеличивать ее до он достигает последнего изображения (изображения.длина), используя for петлю, а затем положить эту переменную вместо 0
var image = document.getElementsByClassName('high');
for (var i = 0; i < image.length; i++) {
image[i].addEventListener('click', function() {
// functions to be invoked
});
}
2 - Сбросить границу для всех изображений с каждым нажмите
Сделать функцию для сброса границы все изображения с использованием новой петли for со свежей переменной
function resetBorder() {
for (var v = 0; v < images.length; v++) {
images[v].style.border = '';
}
}
3 - Добавить границу для щелкнули элемента
Для этой части мы создадим функцию и дать ему аргумент. то вместо того, чтобы использовать this.style.border (потому что она будет называться функцией), мы добавим стиль к аргументу
function addBorderTo(thisImage) {
thisImage.style.border = '4px solid #00f';
}
затем измените аргумент this, когда мы вызываем функцию addBorderTo(this);
4 - Показать детали элемента с щелчком
Мы получим элемент, который удерживает t он деталь изображения (li или р) , а затем получить атрибут альта для щелкнули изображения, которые держат имя изображения функции выше
function showImageDetails(thisImage) {
var imgDetails = document.querySelectorAll('.imgDetails p')[1];
imgDetails.textContent = thisImage.getAttribute('alt');
}
Тогда код может быть оптимизирован для выглядеть:
https://jsfiddle.net/89znymLm/4/
var images = document.getElementsByClassName('high');
var imagesLen = images.length;
var imgDetails = document.querySelectorAll('.imgDetails p')[1];
// loop through each image and and addEventListener for each one
for (var i = 0 ; i < imagesLen; i++) {
images[i].addEventListener('click', function() {
resetBorder();
addBorderTo(this);
showImageDetails(this);
});
}
// make a new loop for each click and reset images by it
function resetBorder() {
for (var v = 0; v < imagesLen; v++) {
images[v].style.border = '';
}
}
function addBorderTo(thisImage) {
thisImage.style.border = '4px solid #00f';
}
function showImageDetails(thisImage) {
imgDetails.textContent = thisImage.getAttribute('alt');
}
.cont {
width: 700px;
list-style-type: none;
overflow: hidden
}
.imgDetails {
width: 100px;
float: left;
margin-top: 30px
}
.imgDetails p:first-child {
text-decoration: underline;
}
.imagesHolder {
float: left
}
.imagesHolder li {
display: inline-block
}
<div class="cont">
<div class="imgDetails">
<p>image selection</p>
<p>image name</p>
</div>
<ul class="imagesHolder">
<li><img class="high" src="http://placehold.it/150x120/3498db" alt="first image"></li>
<li><img class="high" src="http://placehold.it/150x120/8e44ad" alt="second image"></li>
<li><img class="high" src="http://placehold.it/150x120/e74c3c" alt="third image"></li>
</ul>
</div>
Используйте ** JQuery ** для этого типа проблем. Это быстрее и удобнее. – sudar
Я изучаю ** JavaScript ** сейчас, я понятия не имею о ** JQuery ** – JIMMY
По-моему, лучше не начинать с jQuery. Всегда лучше понимать ** основы ** (JavaScript) ** сначала ** перед использованием библиотеки. – Sun