Есть ли более простой способ множественного, если еще JavaScript?

Question

Так что я новичок в JS и написал это. В основном я складывал изображения с абсолютной позицией и 0 непрозрачностью, и когда вы нажимаете кнопку, это придает этому рисунку непрозрачность 1, а затем придает остальным непрозрачность 0. Также есть эффект перехода. В любом случае, мой вопрос, если вы посмотрите на JavaScript в моем коде:

A: Я так делаю? B: Есть ли лучший способ, не имея столько кода?

Вот соответствующий код:

<div id="navwrap"> 

<a href="#" onclick="toggle()">pic 1</a> 
<a href="#" onclick="toggle2()">pic 2</a> 
<a href="#" onclick="toggle3()">pic 3</a> 
<a href="#" onclick="toggle4()">pic 4</a> 

</div> 

<img id="pic1" class="pic" src="http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg"> 

<img id="pic2" class="pic" src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/nature-landscape-hd-wallpapers-widescreen-nature-desktop-images.jpg"> 

<img id="pic3" class="pic" src="http://images.fanpop.com/images/image_uploads/JAPAN-LANDSCAPE-japan-419407_1920_1440.jpg"> 

<img id="pic4" class="pic" src="http://www.personaltouchcolorado.com/wp-content/uploads/2013/01/Lawn-Landscape.jpg"> 

<script> 
var w=document.getElementById('pic1'); 
var x=document.getElementById('pic2'); 
var y=document.getElementById('pic3'); 
var z=document.getElementById('pic4'); 
</script> 

<script> 
function toggle() 
{ 
    if (w.style.opacity=='0') 
    { 
     w.style.opacity='1'; 
    } 
    else 
    { 
     w.style.opacity='0'; 
    } 
    if (w.style.opacity=='1') 
    { 
     w.style.opacity='1'; 
    } 
    else 
    { 
     w.style.opacity='1'; 
    } 
    { 
     x.style.opacity='0'; 
    } 
    { 
     y.style.opacity='0'; 
    } 
    { 
     z.style.opacity='0'; 
    } 
} 
</script> 

<script> 
function toggle2() 
{ 
    if (x.style.opacity=='1') 
    { 
     x.style.opacity='0'; 
    } 
    else 
    { 
     x.style.opacity='1'; 
    } 
    if (x.style.opacity=='1') 
    { 
     x.style.opacity='1'; 
    } 
    else 
    { 
     x.style.opacity='1'; 
    } 
    { 
     w.style.opacity='0'; 
    } 
    { 
     y.style.opacity='0'; 
    } 
    { 
     z.style.opacity='0'; 
    } 
} 
</script> 

<script> 
function toggle3() 
{ 
    if (y.style.opacity=='1') 
    { 
     y.style.opacity='0'; 
    } 
    else 
    { 
     y.style.opacity='1'; 
    } 
    if (y.style.opacity=='1') 
    { 
     y.style.opacity='1'; 
    } 
    else 
    { 
     y.style.opacity='1'; 
    } 
    { 
     w.style.opacity='0'; 
    } 
    { 
     x.style.opacity='0'; 
    } 
    { 
     z.style.opacity='0'; 
    } 
} 
</script> 

<script> 
function toggle4() 
{ 
    if (z.style.opacity=='1') 
    { 
     z.style.opacity='0'; 
    } 
    else 
    { 
     z.style.opacity='1'; 
    } 
    if (z.style.opacity=='1') 
    { 
     z.style.opacity='1'; 
    } 
    else 
    { 
     z.style.opacity='1'; 
    } 
    { 
     w.style.opacity='0'; 
    } 
    { 
     x.style.opacity='0'; 
    } 
    { 
     y.style.opacity='0'; 
    } 
} 
</script> 

Answer 1

параметризующих звонки:

<a href="#" onclick="toggle(1)">pic 1</a> 
<a href="#" onclick="toggle(2)">pic 2</a> 
<a href="#" onclick="toggle(3)">pic 3</a> 
<a href="#" onclick="toggle(4)">pic 4</a> 

И сделать один, гораздо умнее, функция:

function toggle(id) 
{ 
    var el = document.querySelectorAll('.pic'); 
    for(var i = 0; i != el.length; i++) 
     el[i].style.opacity = 0; 
    document.getElementById('pic'+id).style.opacity = 1; 
} 

document.querySelectorAll работает только в более поздние браузеров (особенно не в IE8 или ниже), но это довольно академично - на производстве вы должны использовать библиотеку, такую ​​как Mootools или jQuery, которая абстрагирует это под ней.

Answer 2

Ваш код действительно очень неэффективен, но большая проблема заключается в том, что ваши петли if/else написаны неправильно.

Во-первых, {} после того, как if/else запустит 'block', вам не нужно добавлять дополнительные {}.

Во-вторых, вы можете использовать аргумент функции для установки целевого изображения, тем самым делая его так, что вам нужна только одна функция для выполнения кода.

В-третьих, в настоящее время жесткого кодирования изображений, так как все они имеют класс вы можете использовать функцию document.getElementsByTagName и проверить изображения, которые имеют их свойство className установлен pic (Если вы не заботитесь о поддержке старых браузеров, таких как IE8 и ниже, вы можете просто использовать document.querySelectorAll)

Answer 3

с дальнейшим объяснением того, что Нильс сказал об использовании jquery, вы можете сделать это со следующим кодом.

включают JQuery в документе

function toggle(id){ 
    $('.pic').css('opacity', '0'); 
    $('#pic'+id).css('opacity', '1'); 
} 

кроме того примечание 3 балла

1. отступы код.
2. использовать инструкцию switch для такого сценария, если это необходимо.
3. для такого сценария делают функцию, которая динамически обрабатывает такую ​​операцию , где группа элементов должна обрабатываться одинаково.