2016-11-08 10 views
0

저는 JavaScript가 처음이에요. 저는이 문제를 해결하는데 어려움을 겪고 있습니다.자바 스크립트 메소드의 값 변경

메서드에서 값을 전환 할 onclick 이벤트를 만들려고합니다. 나는 OpenSeadragon를 사용하고 있는데 나는이 현재의 onclick으로 설정 한 : 내 HTML에서 버튼을 누르면

viewer.world.getItemAt(1).setOpacity(0); 

, 나는이 레이어를 발표 할 예정이다 0과 1 (0) 전환 할 setOpacity 필요 OpenSeadragon에서 설정했습니다. 레이어가 .getItemAt (1)에 반영됩니다. 다음은 코드가있는 페이지에 대한 링크입니다 : http://web.stanford.edu/~cmalex/woel. 어떤 도움을 주시면 더 좋구요

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="default"> 
    <meta name = "viewport" content = "user-scalable = no"> 
    <title>Wonder of Everyday Life</title> 
    <link rel="stylesheet" href="styles/normalize.css/normalize.css" type="text/css" media="screen"> 
    <link rel="stylesheet" href="styles/main.css" type="text/css" media="screen"> 
    <script src="scripts/jquery.min.js"></script> 
</head> 

<body> 
<div id="header"> 
    <h1 class="museum">Cantor Arts Center</h1> 
    <h1><a href="javascript:history.go(0)" class="show">Restart</a></h1> 
</div>  

<div id="subheader"> 
    <h2>The Wonder of Everyday Life</h2> 
    <p>Dutch Golden Age Prints</p> 
</div> 

<div id="openseadragon"></div> 

<div id="instructions"> 
    <p>Pinch and Zoom or use controls</p> 
</div> 
<div id="footer"> 
    <div id="toolbar"> 
     <a id="zoom_in" href="#zoom_in"></a> 
     <a id="zoom_out" href="#zoom_out"></a> 
     <a id="reset" href="#reset"></a> 
     <a id="view" onclick="viewer.world.getItemAt(1).setOpacity(0);"></a> 
    </div> 
</div> 
<script src="scripts/openseadragon.min.js"></script> 
<script type="text/javascript"> 
    var viewer = OpenSeadragon({ 
     id: "openseadragon", 
     prefixUrl: "scripts/images/", 
     tileSources: "openseadragon/map.dzi", 
     opacity: 1, 
     zoomInButton: "zoom_in", 
     zoomOutButton: "zoom_out", 
     homeButton: "reset", 
     showNavigator: true, 
     navigatorPosition: "ABSOLUTE", 
     navigatorTop:  "10px", 
     navigatorLeft:  "10px", 
     navigatorHeight: "145px", 
     navigatorWidth: "125px", 
     visibilityRatio: 1.0, 
     constrainDuringPan: true 
    }); 

    viewer.addTiledImage({ 
     tileSource: "openseadragon/overlay.dzi", 
     index: 1 
    }); 


</script> 

</body> 
</html> 

:

여기에 전체 코드입니다!

+1

주 코드는 온 클릭 사용자가 만든 이벤트 및 콘솔에서 얻을 오류를 적어주세요 문제 –

+1

을 설명합니다. 또한 레이어로 오버레이를 의미합니까? – Icewine

+0

안녕하세요 @ Akshaypadwal. 위의 코드를 업데이트했습니다. 당신의 도움을 주셔서 감사합니다. 더 이상 정보가 필요하면 알려주세요! – cmalexander

답변

0

게으른 부랑자가 아니며 코드에 스 니펫을 입력하십시오. HAHA 스니 펫을 넣었을 때 사이트의 특수 문자 인 &zwnj;&#8203을 발견했습니다.

viewer.world.getItemAt(1).setOpacity((viewer.world.getItemAt‌​(1).getOpacity())?0:‌​1) 

은 요소 viewer.world.getItemAt‌​(1).getOpacity()의 불투명도의 현재 값을 얻을 것이다 그것을 (i)?0:1의 반대를 표시합니다.

불투명도가 10 진수 값이고 따라서 u가 0.8과 같은 값으로 실행되는 경우 요소를 없애기 위해 0으로 반올림하여 Math.floor (i)를 사용하도록 요청했습니다. 그것은 귀하의 코드에서 필요하지는 않지만.

<div id="footer"> 
    <div id="toolbar"> 
     <a id="zoom_in" href="#zoom_in"></a> 
     <a id="zoom_out" href="#zoom_out"></a> 
     <a id="reset" href="#reset"></a> 
     <a id="view" onclick="viewer.world.getItemAt(1).setOpacity(0);"></a> 
    </div> 
</div> 

또한

<div id="footer"> 
    <div id="toolbar"> 
     <a id="zoom_in" href="#zoom_in"></a> 
     <a id="zoom_out" href="#zoom_out"></a> 
     <a id="reset" href="#reset"></a> 
     <a id="view" onclick="viewer.world.getItemAt(1).setOpacity((viewer.world.getItemAt(1).getOpacity())?0:1);"></a> 
    </div> 
</div> 

에, 당신은 기능 제한되는 모든 바인딩이 위의 솔루션은 귀하의 사이트에서 작업하면 같은 off 또는 one 를 호출 할 제거해야

변경합니다. 나는 확인했다. 당신이 그것을 클릭하면

https://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert

+0

하! 너는 무엇을 기대 하느냐! 나는이 모든 것을 처음 접했어! 도움과 당신이 나와 함께 할 여분의 노력에 감사드립니다! 좋아요, 그래서 저는 이것을 이해합니다 - 어떤면에서 if-then 진술과 같은 것입니까? 도와 주셔서 감사합니다. 그것은 내가 원하는 것처럼 정확하게 작동합니다. – cmalexander

+0

downvote에 대한 이유는 무엇입니까? 그의 사이트는 일하고있다. – unkn0wn

+0

예, 다른 경우의 속기를 좋아합니다. 일반적으로 한 줄 조건 검사에 사용됩니다. '(조건)? eventA : eventB' 조건이 true이면 eventA가 실행되고 그렇지 않으면 eventB가 발생합니다. – unkn0wn