누군가가이 Jquery 코드로 도움을받을 수 있습니까

나는이 코드를 지금 당장 작동 시키려고 노력하고 있으며 무엇이 잘못되었는지 알 수 없습니다. 이미지가 포함 된 트라이 상태 롤오버 용입니다. (나는 CSS로이 일을 할 수 있다는 것을 알고 있으므로 대답하지 마시기 바랍니다.) 목표는 jquery를 배우려고 노력하고 있으며, 학습의 일부로 여기서 내가 누락 된 것을 알아 내려고합니다.누군가가이 Jquery 코드로 도움을받을 수 있습니까

문제점은 mouseover 및 mouseout 이벤트를 수행 할 때 버튼이 올바르게 강조 표시됩니다. 그러나 버튼을 클릭 한 다음 다른 버튼을 클릭하면 클릭하는 모든 버튼이 유지됩니다. 나는 전형적인 탭 컨트롤과 같은 각 이미지를 클릭 할 때 온 상태를 토글 할 수 있어야한다.

나는이 일을하는 더 좋은 방법이 있다는 것을 알고 있지만, 나는 정말로 내가 잘못한 것을 배우려고 노력하고 있으며, 나는 극도로 절망적이다. 그래서 내가 게시하고있는 코드를 특별히 고칠 수있는 사람이 있다면 정말 감사 할 것입니다. 다시 말하지만, 이것은 특정 CSS 기술로이 작업을 수행 할 수 있다는 것을 알고 있지만 여기에서 내가 잘못하고있는 것을 이해하고 싶습니다.

미리 감사드립니다.

$(document).ready(function() { 
var clicked_obj; 
    $("#nav a").mouseover(function() { 
     if ($(this).data("clicked")) { return; } 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_off.gif$/ig,"_on.gif"); 
     }); 
    }).mouseout(function() { 
     if ($(this).data("clicked")) { return; } 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_on.gif$/ig,"_off.gif"); 
     }); 
    }).click(function() { 
     if (clicked_obj) { 
      $(clicked_obj).removeData("clicked").mouseout(); 
     } 
     clicked_obj = this; 
     $(this).data("clicked", true); 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_off.gif$/ig,"_clk.gif"); 
     }); 
    }); 

}); 


</script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
    <body> 
     <div id="nav"> 
      <div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0" /></div> 
      <div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22" alt="Support" name="support" border="0"/></a></div> 
      <div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div> 
      <div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div> 
     </div> 
    </body> 
</html>

출처

2009-07-31 Rob

에 오신 것을 환영합니다 변화하는 클래스를 제거 할 수 있어야한다, 질문의 양식에 항목 제목을 넣어하는 것이 좋습니다 . 더 구체적 일수록 좋습니다. –

오류를 찾으셨습니까? 그들은 무엇인가? –

여기에서 진행되는 작업을 이해하려면 HTML 코드가 필요합니다. – SolutionYogi

당신은 당신이 :) 할 (JQuery와의 아름다움 :)해야한다고 생각을 정확히해야 할 새로운 하나를 클릭하면 ... 이전에 클릭 버튼에서 선택한 상태를 제거합니다 .... 여기에 이미지 대신 스타일을 사용하는 버전입니다,하지만 당신은 추가/변경에 StackOverflow에 이미지를

var sel; 
$(document).ready(function() { 
    $("#nav a") 
    .mouseover(function() { 
     $(this).addClass("mouseOver"); 
    }) 
    .mouseout(function() { 
     $(this).removeClass("mouseOver"); 
    }) 
    .click(function() { 
     if(sel != null) { 
      $(sel).removeClass("selected"); 
     } 
     $(this).addClass("selected"); 
     sel = this; 
    }); 
});

출처

2009-07-31 21:59:11 Jaime

꽤 많이 있습니다. –

이미지 사용 방법에 대한 예를 들어 줄 수 있습니까? 나는 여러 가지 시도를하고 그것이 내가 원하는대로 작동하도록 할 수 없습니다. – Rob

누군가가이 Jquery 코드로 도움을받을 수 있습니까

답변

관련 문제