代码之家 › 专栏 › 技术社区 › Synthaze

onclick调用JS函数

html javascript

-1

Synthaze · 技术社区 · 2 年前

下面的示例代码加载一个带有“显示3D”可点击分区的页面。点击后,它应该加载一个3D查看器并显示相关数据。

function showPDB(path,id) {
  var stage = new NGL.Stage(id, {backgroundColor:'white'});
  stage.loadFile(path).then(function (o) {
    o.addRepresentation("cartoon", {color: 'white' });
    o.autoView();
  });
};

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/ngl@latest/dist/ngl.min.js"></script>
</head>

<body>
  <div class="row">
    <div class="col" data-toggle="collapse" data-target="#show_0" id="_show_0" onclick="showPDB('https://alphafold.ebi.ac.uk/files/AF-P08047-F1-model_v4.pdb', 'viewport_0')">
      <b>Show 3D</b>
    </div>
  </div>

  <div id="show_0" class="collapse">
    <div class="row">
      <div class="col">
        <div id="viewport_0" style="width:100%; height:800px;"></div>
      </div>
    </div>
  </div>
</body>

</html>

似乎需要单击两次“显示3D”才能加载3D查看器。我希望点击一下就能加载。

我想只有当可折叠元件的内部已经完全加载时,才应该触发此功能。我试着朝这个方向调整,但我还找不到解决办法。

1 回复 | 直到 2 年前

Vishnu Vinod 2 年前

由于它是可折叠的,只需给可折叠的一些时间来装载。要做到这一点,您可以将整个脚本封装在一个设置的超时内,如下所示

function showPDB(path,id) {
  setTimeout(() => {
    var stage = new NGL.Stage(id, {backgroundColor:'white'});
    stage.loadFile(path).then(function (o) {
      o.addRepresentation("cartoon", {color: 'white' });
      o.autoView();
    });
  });
};

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

7 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

7 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

7 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

7 月前