다른 JavaScript를 사용하면 더 쉬운 방법이 있을까요?

Question

그래서 나는 JS에 익숙하지 않고 이것을 썼다. 기본적으로 절대 위치와 0 불투명도로 이미지를 쌓았습니다. 버튼을 클릭하면이 그림이 불투명도 1로 바뀌고 나머지는 불투명도 0으로 바뀝니다. 또한 전환 효과가 있습니다. 내 코드에서 자바 스크립트를 보면 어쨌든 내 질문은 다음과 같습니다.

대답 : 내가 그 일을 제대로하고 있습니까? 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가 '블록'을 시작한 후에 {}을 추가 했으므로 추가하지 않아도됩니다.

두 번째로 함수 인수를 사용하여 대상 이미지를 설정할 수 있으므로 코드를 실행하는 데 필요한 함수가 하나만 필요합니다.

셋째, 현재 그들은 모두 클래스를 가지고 당신이 document.getElementsByTagName 기능을 사용하고 같은 이전 버전의 브라우저를 지원 걱정하지 않을 경우 자신의 className 속성 (pic로 설정된 이미지를 확인하실 수 있습니다, 이미지를 하드 코딩 IE8 이하에서는 document.querySelectorAll을 사용하면됩니다.

Answer 3

Niels가 jquery를 사용하는 것에 대해 더 자세히 설명하면 다음 코드를 사용하여이를 수행 할 수 있습니다.

는 노트 외에 문서

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

에 3 점

1. 들여 쓰기 코드를 jQuery를 포함한다.
2. 필요한 경우 switch 시나리오를 사용하십시오.
3. 이러한 작업은 동적으로 이러한 작업을 처리합니다. 여기서 항목 그룹은 동일한 방식으로 처리되어야합니다.