2016-11-08 8 views
0

JavaScriptを使い慣れていないので、私はこの問題を回避するのに問題があります。JavaScriptのメソッドの値を変更

メソッドの値を切り替えるonclickイベントを作成しようとしています。私はOpenSeadragonを使用していると私は、この現在のonclickのように設定している:

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

私はHTMLでボタンを押すと、私はsetOpacityを必要とする(0)0と1の間に切り替えるには、この層を明らかにする私は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

株式コード、あなたのonclickのユーザーが作成したイベントとあなたがそれをクリックすると、あなたのコンソールで取得したエラーを書いてください、あなたの問題 –

+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の反対が表示されます。

不透明度は、小数点値であり、場合にuはあなたが要素を消えるしたいとuは0にそれを丸めることができ0.8のような値に実行するので、私は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

はい、他の場合の省略形が好きです。通常、1行の条件チェックに使用されます。 '(条件)?eventA:eventB'(条件が真の場合)eventAが発生した場合、それ以外の場合はeventB。 – unkn0wn

関連する問題