如何点击HTML按钮更新JavaScript变量，切换IGV基因组浏览器位置

修改后的实现代码 #

你只需要调整原有的JavaScript逻辑，存储IGV实例并绑定按钮点击事件即可，修改后的完整代码如下：

// 定义全局变量存储IGV浏览器实例，后续点击事件可直接调用
let igvBrowser = null;

document.addEventListener("DOMContentLoaded", function () {
    // 修正初始位置取值：取第一个按钮的值作为初始加载位置
    var position = $('.editbtn').first().val();

    var options = {locus: position, /* 保留你原本的其他配置 */};

    var igvDiv = document.getElementById("igvDiv");

    igv.createBrowser(igvDiv, options)
        .then(function (browser) {
            console.log("Created IGV browser");
            // 初始化完成后把实例赋值给全局变量
            igvBrowser = browser;
        })

    // 给所有跳转按钮绑定点击事件（用事件委托，动态新增的表格行也能生效）
    $(document).on('click', '.editbtn', function() {
        // 拿到当前点击按钮的位置值
        const targetLocus = $(this).val();
        // 如果需要获取当前按钮的id，直接调用 $(this).attr('id') 即可
        // 调用IGV实例方法跳转至目标位置
        if(igvBrowser) {
            igvBrowser.search(targetLocus);
        }
    })
};

核心修改说明 #

• 提前定义全局的igvBrowser变量存储初始化完成的IGV实例，只有拿到实例才能调用IGV的内置跳转方法
• 修正了初始位置的取值逻辑，适配你现在按钮id不重复的结构
• 绑定点击事件后，会自动读取当前点击按钮的value作为目标位置，调用IGV内置的search方法完成跳转，完全兼容你按钮value的格式

内容的提问来源于stack exchange，提问作者Julia