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，以便它会从我的“提示”数组中获取正确的元素，但由于某种原因，当我在浏览器中查看页面时，然后单击图像，画布下方的文本不会更新。似乎此函数没有将“id”变量更新为已单击的任何图像的 ID。

在研究了这个之后，在我看来，我想在“mousedown”函数中使用一个循环，它将获取检测到点击的图像的“id”，并循环遍历我的“ source 的数组（这是所有图像从 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/ 虽然“结果”面板没有显示我在浏览器中查看页面时实际看到的内容 - 我得到了显示所有图像的画布，并且画布下方的段落显示了我的“提示”数组的第一个元素中的文本。

编辑 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，虽然这个变量小于我的“源”数组（这是存储所有图像的数组）的长度，但该函数应该检查点击是否在被数组中的一个图像覆盖的画布区域上。

如果是，那么控制台日志应该显示消息“点击图像检测到”，以及行

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

应将“tipsParagraph”的值设置为“sources”数组的“imageCheckIteration”位置处的任何图像的“data-tip”属性的值。如果在未显示图像的画布区域上检测到点击，则“tipsParagraph”的值应设置为不保留任何内容。

但是，由于某种原因，当我在浏览器中查看页面时，“tipsParagraph”显示文本“这是显示文本的位置”，这是它的默认值，所以没问题。但是，当我单击图像或单击画布上的任何其他位置时，“tipsParagraph”中显示的文本不会更新。

我不知道为什么会这样——有人能指出我正确的方向吗？这是否意味着我的isClickOnImage(event) 函数永远不会被调用？

Answer 1

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

$('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 中的文本。

您可以看到更多解决方案here。