Question

我是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>

非常感谢任何帮助！

Answer 1

不要是懒惰的屁股并在代码中键入该代码段。哈哈当你插入那个片段时，我注意到你网站上的一些特殊字符sourcceode &zwnj;&#8203。

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

这将获得元素viewer.world.getItemAt‌(1).getOpacity()的不透明度的当前值，并将显示其(i)?0:1的相反值。

我要求使用Math.floor（i），因为不透明度是一个十进制值，如果你遇到像0.8这样的值，你可以把它四舍五入到0，因为你想要消除元素。虽然在您的代码中没有必要。

更改

<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

更改javascript方法中的值

1 个答案: