Question

我是JQuery和Web开发的新手，因此在开发过程中面临着一个令人不安的问题。我的网站界面如下所示：

当用户点击任何复选框时（出于推介目的，我选择了'chk2'上方的框），然后点击'显示证据'按钮（图片中的方框2），我希望用户能够突出显示相邻iframe中显示的文章部分。我正在使用我在网上找到的文本荧光笔Jquery插件。 “显示证据”按钮的点击事件的代码如下所示：

$('.show_evidence').click(function(event){
       var iframe = document.getElementById('myiFrame');
       var hltr = new TextHighlighter(iframe.contentDocument.body);
       hltr.setColor("yellow");                
   });

上面的代码工作正常。

现在，当用户点击“取消选择”复选框（图像中的方框3）时，我想将高亮颜色（即hltr.setColor（“blue”））设置为蓝色。为此我需要能够访问我上面定义的'hltr'对象（即'.show_evidence'的'click'事件处理程序内）。此外，当用户取消选中“取消选中”复选框时，我想将突出显示颜色设置为“黄色”。

$(".unselect").change(function() {
    if(this.checked) {
        //Something like - hltr.setColor("blue");
    }
    else {
        // Something like - hltr.setColor("yellow");
    }
});

最后，当用户点击“隐藏基准”链接时（图1中的方框1），我还想取消设置或取消定义对象'hltr'。

所以我的问题是如何在.Unselect和'Hide Datums'链接的事件处理程序中访问hltr对象。

经过大量的stackoverflow冲浪后，我发现我可以使用外部变量，但我不确定这是否适用于对象。另外，是否有我应该使用或遵循的普遍推荐的设计？实现我想要的最好方法是什么？

期待您的建议。请帮忙！

此致 Saswati

Answer 1

您可以采用的一种方法是将执行元素选择的代码行提取到单独的方法中。 var hltr;

function getBodyElementOfIframe() {
    var iframe = document.getElementById('myiFrame');
    if(!hltr) {
        hltr = new TextHighlighter(iframe.contentDocument.body);
    }
    return hltr;
}

调用要访问元素的方法，然后设置颜色。

$(".unselect").change(function() {

    var hltr = getBodyElementOfIframe();

    if(this.checked) {
        hltr.setColor("blue");
    }
    else {
        hltr.setColor("yellow");
    }
});

Answer 2

如果您需要在多个函数中使用变量，请在所有函数之外声明它。

$(function(){
    var iframe = document.getElementById('myiFrame');
    var hltr = new TextHighlighter(iframe.contentDocument.body);

    $('.show_evidence').click(function(event){
       hltr.setColor("yellow");                
    });
});

当您的事件处理程序触发时，它们将更新此var，并且可以访问下一个名为的处理程序。

Answer 3

有很多方法可以解决它，但一种简单的方法是将变量移到方法范围之外，以便可以通过它访问它。

我会把它放在on ready里面。

$(document).ready(function () {
    var hltr = {};

    $('.show_evidence').click(function(event){ 
        var iframe = document.getElementById('myiFrame');
        hltr = new TextHighlighter(iframe.contentDocument.body);
        hltr.setColor("yellow");                
    });

    $(".unselect").change(function() {
        if(this.checked) {
            //Something like - hltr.setColor("blue");
        }
        else {
            // Something like - hltr.setColor("yellow");
        }
    });
})();

在多个事件处理程序中访问JQuery对象

3 个答案: