, пожалуйста, помогите мне упростить: показать/скрыть миниатюры и большие изображения

Итак, я очень начинаю с javascript и хотел бы немного помочь упростить этот код., пожалуйста, помогите мне упростить: показать/скрыть миниатюры и большие изображения

У меня есть серия эскизов, расположенных в определенном шаблоне, и когда вы нажимаете на миниатюру, я бы хотел, чтобы все миниатюры исчезли, и соответствующее изображение большего размера стало видимым. Затем, когда вы нажимаете на большое изображение, оно исчезает, и все миниатюры снова видны. Каждый эскиз имеет свой собственный идентификатор div, потому что все они имеют свои уникальные позиции. Я выяснил, как это сделать, но это очень повторяемо.

HTML:

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big1();"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big2();"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big3();"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs1();"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs2();"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs3();"/></div> 
    ...etc 
</div> 

</body>

JavaScript:

get_big1() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large1').style.visibility='visible'; 
} 
get_thumbs1() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large1').style.visibility='hidden'; 
} 

get_big2() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large2').style.visibility='visible'; 
} 
get_thumbs2() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large2').style.visibility='hidden'; 
} 

get_big3() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large3').style.visibility='visible'; 
} 
get_thumbs3() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large3').style.visibility='hidden'; 
} 

</script>

Там должно быть лучше! Я думаю, что это не так сложно, я просто не могу понять это. Заранее спасибо.

источник

2012-02-08 Kudra Ilse

Есть много способов решения этой проблемы. Первое и самое очевидное, что приходит на мой взгляд, просто пройти ряд в одну функцию, которая определяет идентификатор изображения для изменения:

function get_thumbs(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
} 

<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div>

... И то же самое для get_big().

В качестве альтернативы вы можете использовать только одну функцию, которая обрабатывает оба условия (большое или уменьшенный):

function get_img(id, type) { 
    if (type == 'big') { 
    document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
    document.getElementById('large' + id).style.visibility='visible'; 
    } 
    else if (type == 'thumb') { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
    } 
    else return false; 
}

И в HTML:

<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_img(1, 'big');"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_img(2, 'big');"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_img(3, 'big);"/></div> 
    ...etc 
</div> 
<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_img(1, 'thumb');"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_img(2, 'thumb');"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_img(3, 'thumb');"/></div> 
    ...etc 
</div>

источник

2012-02-08 03:37:04

это замечательно, спасибо! –

Вы могли бы упростить, сделав все это на две функции и использовать вход для привода, какой элемент влияет:

HTML:

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div> 

</body>

JavaScript:

get_big(id) { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large'+id).style.visibility='visible'; 
} 
get_thumbs(id) { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large'+id).style.visibility='hidden'; 
}

источник

2012-02-08 03:36:08

Есть много способов, вы можете сделать это , и это было бы очень быстро и легко в jQuery, но я не буду защищать это здесь, потому что вы явно хотите узнать о javascript, и jQuery может защитить вас от этого. Попробуйте сделать ваши функции и вызовы функций общего, например:

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div> 

</body>

Javascript

function get_thumbs(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
} 
function get_big(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
    document.getElementById('large' + id).style.visibility='visible'; 
}

источник

2012-02-08 03:39:35

Библиотека как JQuery можно сделать это гораздо проще, но вот как вы можете улучшить свой код, используя JavaScript.

Сначала измените свой html, чтобы включить классы. Затем мы будем использовать их для сбора выбранных элементов. Также удалите встроенные обработчики onclick. Старайтесь не смешивать js и html.

<div id="thumbnail_wrapper"> 
    <div class="thumbnail" id="thumbnail1"><img src="thumbnail1.jpg" /></div> 
    <div class="thumbnail" id="thumbnail2"><img src="thumbnail2.jpg" /></div> 
    <div class="thumbnail" id="thumbnail3"><img src="thumbnail3.jpg" /></div> 
</div> 


<div id="largeimage_wrapper"> 
    <div class="large" id="large1"><img src="thumbnail1.jpg" /></div> 
    <div class="large" id="large2"><img src="thumbnail2.jpg" /></div> 
    <div class="large" id="large3"><img src="thumbnail3.jpg" /></div> 
</div>

Далее полезно использовать CSS для изменения видимости элементов вместо прямого изменения атрибута стиля. Это значительно облегчает изменение стиля.

div#thumbnail_wrapper .hidden { visibility: hidden; } 
div.large .hidden { visibility: hidden; }

Далее мы можем использовать getElementsByClassName прикрепить OnClick обработчик

var thumbs = document.getElementsByClassName('thumbnail'); 
var large = document.getElementsByClassName('large'); 

for (var i = 0; i < thumbs.length; i++) { 
    thumbs[i].onclick = function() { 
     //hide all thumbs 
     document.getElementById('thumbnail_wrapper').classList.add('hidden'); 
     //show large image (i got lazy and sliced) 
     document.getElementById('large' + this.id.slice(-1)).classList.remove('hidden'); 
    }; 
} 

for (var i = 0; i < large.length; i++) { 
    large[i].onclick = function() { 
     //hide large image 
     this.classList.add('hidden'); 
     //show thumbs 
     document.getElementById('thumbnail_wrapper').classList.remove('hidden'); 
    }; 
}

Это создает хорошую дифференциацию между моделированием с помощью CSS, DOM структуры для содержащихся элементов и яваскрипта кода, который вносит изменения.

источник

2012-02-08 03:50:32 mrtsherman

, пожалуйста, помогите мне упростить: показать/скрыть миниатюры и большие изображения

ответ

Смежные вопросы