JavaScript,使用函数更改HTML <p>标记中显示的文本

Question

我有一个HTML5画布,它在画布下面的页面上显示了许多图像和一段文字.我希望更新段落中的文本,以根据用户点击的图像显示JS数组中的不同元素.

目前,我有一个'mousedown'功能,如下所示:

    _mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);
        isClickOnImage(evt);
        var id = shape.id;
        selectTip(id);
    }

    //init stage drag and drop
    if(Kinetic.DD && this.attrs.draggable) {
        this._initDrag();
    }
}

我尝试使用该行var id = shape.id来更新传递给函数的ID,以便它从我的'tips'数组中获取正确的元素,但出于某种原因,当我在浏览器中查看页面时,单击图像,画布下方的文字未更新.看来这个函数没有将'id'变量更新为点击的图像的ID.

在看了这个之后,在我看来,我想在'mousedown'函数中使用一个循环,它将获取检测到点击的图像的'id',并遍历我的'sources'数组(这是将所有图像从HTML加载到JS中的位置),在每个位置检查存储在该位置的图像是否具有与已点击的图像相同的ID.如果是这样,循环应该将文本设置为存储在数组的该位置的文本,如果没有,它应该继续查看数组直到找到它.这有意义吗？我尝试将以下代码添加到'mousedown'函数中,但它不会像我预期的那样更改文本:

var imageCheckArray = 0;
        while(imageCheckArray < sources.length){
            if(shape.id == sources[imageCheckArray]){
                selectTip(imageCheckArray);
            } else {
                imageCheckArray++;
            }
        }

循环中是否有我遗漏的东西？

整个函数的代码目前如下所示:

_mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);
        isClickOnImage(evt);
        /*This line needs to get the element of the sources array that has been selected, 
            and then select the element at the same position from the tips array.*/
        //var id = null;
        var imageCheckArray = 0;
        while(imageCheckArray < sources.length){
            if(shape.id == sources[imageCheckArray]){
                selectTip(imageCheckArray);
            } else {
                imageCheckArray++;
            }
        }

        //var id = 
        //selectTip(id);
    }

    //init stage drag and drop
    if(Kinetic.DD && this.attrs.draggable) {
        this._initDrag();
    }
}

编辑11/01/2013 @ 16:10

代码selectTip是:

function selectTip(id){
    $("#tipsParagraph").text(tips[id]);
}

我在这里放了一个jsFiddle:http://jsfiddle.net/cd8G7/虽然'结果'面板没有显示我在浏览器中查看页面时实际看到的内容 - 我得到了所有的画布显示的图像,画布下方的段落显示我的'tips'数组的第一个元素的文本.

编辑23/01/2013 @ 13:50

这是我的isClickOnImage功能:

function isClickOnImage(event){
    var clickX = event.clientX;
    var clickY = event.clientY;

    //var imageCheckIteration = 0;
    while(imageCheckIteration < sources.length){
        if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
        (clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
            /*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
            outside the canvas, in the <p></p> tags below. */
            console.log("Click on image detected");
            document.getElementById("tipsParagraph").innerHTML = sources[imageCheckIteration].data-tip /*tips[imageCheckIteration]*/;
        } else {
            document.getElementById("tipsParagraph").innerHTML = "";
        }
    }
}

我打算这个函数的作用是捕获画布上任何点击的X和Y坐标,并将它们存储在变量"clickX"和"clickY"中.然后,我有一个名为"imageCheckIteration"的变量,它已被初始化为0,虽然这个变量小于我的"sources"数组的长度(这是所有图像都已存储的数组),但该函数应该是检查单击是否位于画布中由阵列中的一个图像覆盖的区域.

如果是,则控制台日志应显示消息"点击检测到的图像"和该行

document.getElementById("tipsParagraph").innerHTML = sources[imageCheckIteration].data-tip;

应将"tipsParagraph"的值设置为'sources'数组'imageCheckIteration'位置的任何图像的'data-tip'属性的值.如果在未显示图像的画布区域上检测到单击,则应将"tipsParagraph"的值设置为不保留任何内容.

但是,出于某种原因,当我在浏览器中查看页面时,'tipsParagraph'显示文本"这是文本将显示的位置",这是它的默认值,所以没关系.但是,当我单击图像或单击画布上的任何其他位置时,"tipsParagraph"中显示的文本不会更新.

我无法弄清楚为什么会这样 - 有人能指出我正确的方向吗？这是否意味着永远不会调用我的'isClickOnImage(event)'函数？

Answer 1

我简化了您通过画布获取图像引用的方式。这里的技巧是交换画布和图像容器的 z 索引，并在鼠标松开事件上获取对图像的引用。我不知道有什么干净的方法来获取画布后面的元素，因此有解决方法。

$('canvas').bind('mousedown', function(e) {
  $('section').css('z-index', 4);
});

$('img').bind('mouseup', function(e) {
  $('#tipsParagraph').text($(this).attr('id') + ":" + $(this).attr('alt'));
  $('section').css('z-index', 2);
});

这里的第二部分是从图像本身获取一些属性并更新 div 内的文本。

您可以在此处查看更多解决方案。