내 자바 스크립트는 어떻게됩니까? 제대로 작동하지 않습니다.

Question

내 코드가 무엇인지 잘못 알지만 실제로 HTML을 미리 볼 때 제대로 작동하지 않습니다. 나는 무엇이라도 놓치지 않았다!?

클릭하면 g1과 g2가 잘 작동하지만 g2를 g 버튼으로 클릭하면 g3으로 표시되지만 g4로 이동하고 위/아래 버튼이 더 이상 작동하지 않습니다. (

function chgPic(id) { 
    $('#show').attr('src', id).stop(true, true).hide().fadeIn(); 
} 

//tooltip (rename the element to put tooltip on it "title") 
//$(document).ready(function() { 
// $("#simple").tiptip(); 
//}); 

function up() { 
    if (document.getElementById('g1').style.display == 'block') { 
    $('#g1').show(); 
    $('#g2').hide(); 
    $('#g3').hide(); 
    $('#g4').hide(); 
    } 
    else if (document.getElementById('g2').style.display == 'block') { 
    $('#g1').show(); 
    $('#g2').hide(); 
    $('#g3').hide(); 
    $('#g4').hide(); 
    } 
    else if (document.getElementById('g3').style.display == 'block') { 
    $('#g1').hide(); 
    $('#g2').show(); 
    $('#g3').hide(); 
    $('#g4').hide(); 
    } 
    else if (document.getElementById('g4').style.display == 'block') { 
    $('#g1').hide(); 
    $('#g2').hide(); 
    $('#g3').show(); 
    $('#g4').hide(); 
    } 
    else { 
    $('#g1').hide(); 
    $('#g2').hide(); 
    $('#g3').hide(); 
    $('#g4').show(); 
    } 
} 

function down() { 
    if (document.getElementById('g1').style.display == 'block') { 
    $('#g1').hide(); 
    $('#g2').show(); 
    $('#g3').hide(); 
    $('#g4').hide(); 
    } 
    else if (document.getElementById('g2').style.display == 'block') { 
    $('#g1').hide(); 
    $('#g2').hide(); 
    $('#g3').show(); 
    $('#g4').hide(); 
    } 
    else if (document.getElementById('g3').style.display == 'block') { 
    $('#g1').hide(); 
    $('#g2').hide(); 
    $('#g3').hide(); 
    $('#g4').show(); 
    } 
    else { 
    $('#g1').hide(); 
    $('#g2').hide(); 
    $('#g3').hide(); 
    $('#g4').show(); 
    } 
} 

Answer 1

내가 요소가되지 않도록 마크 업에 문제가 어떻게 생각하는지, 존재라고 생각합니다. 당신이 #g3 태그 제대로 닫혀 있지 않은 경우 예를 들어, #g4 태그는 #g3 태그 안에 될 수있다

필요한 코드보다 조금 더 많은 코드가 있지만 요소가있는 경우 제대로 작동합니다. p 오른쪽.

당신이 볼 수있는 요소를 확인하기 위해 jQuery를 사용할 수 있으며, 특별히 초기에는 더 요소에 block에 display 스타일을 설정하지 않아도 방법은 코드가 작동하려면 :

function up() { 
    if ($('#g2').is(':visible')) { 
    $('#g1').show(); 
    $('#g2').hide(); 
    } 
    else if ($('#g3').is(':visible')) { 
    $('#g2').show(); 
    $('#g3').hide(); 
    } 
    else if ($('#g4').is(':visible')) { 
    $('#g3').show(); 
    $('#g4').hide(); 
    } 
} 

function down() { 
    if ($('#g1').is(':visible')) { 
    $('#g1').hide(); 
    $('#g2').show(); 
    } 
    else if ($('#g2').is(':visible')) { 
    $('#g2').hide(); 
    $('#g3').show(); 
    } 
    else if ($('#g3').is(':visible')) { 
    $('#g3').hide(); 
    $('#g4').show(); 
    } 
} 

데모 : http://jsfiddle.net/86GVE/2/ 당신이 jQuery를 객체에 요소를 선택하면

, 당신은 덜 반복적 인 코드를 얻을 수 있고, 당신이 원하는대로 당신은 쉽게 많은 요소를 추가 할 수 있습니다 :

var g = $('#g1,#g2,#g3,#g4'); 

function up() { 
    for (var i = 1; i < g.length; i++) { 
     if (g.eq(i).is(':visible')) { 
      g.eq(i - 1).show(); 
      g.eq(i).hide(); 
      break; 
     } 
    } 
} 

function down() { 
    for (var i = 0; i < g.length - 1; i++) { 
     if (g.eq(i).is(':visible')) { 
      g.eq(i + 1).show(); 
      g.eq(i).hide(); 
      break; 
     } 
    } 
} 

,536,

데모 : http://jsfiddle.net/86GVE/1/

id 대신 클래스를 사용하여 요소를 찾으면 Javascript 코드를 변경하지 않고도 요소를 추가 할 수 있습니다. 포함 할 모든 요소에 동일한 클래스를 추가하고 선택하십시오. 예 :

var g = $('.g');