Question

我又有一个相当简单的问题，我找不到答案。

我正在使用软件Jquery函数.text（）在动态创建的div上的mouseenter上写文本。我开始意识到这只适用于我的Iceweasel，但不适用于Chrome。而不是ot .text（），人们建议使用.val（），但我似乎无法弄清楚如何在我的实现中使用它，因为div没有以前的文本值。

请在下面找到一个简单的代码，使用.text（）来解答问题。

(function(){
    for (var i = 0; i < 3; i++) {
        var span = document.createElement("span");
        span.innerHTML = "<img width=\"" + data.size[i][0] + "\" height=\"" + data.size[i][1] + "\" id=\"" + i + "\">";
        span.style.position = "absolute";
        span.style.left = data.coords[i][0] + "px";
        span.style.top = data.coords[i][1] + "px";
        document.body.appendChild(span);
    }
}());

for (var i=0; i<3; i++) {
    $('#' + i).mouseenter(function() { 
         $(this).text("text");  
    });
    $('#' + i).mouseleave(function() { 
         $(this).text("") 
    });
}

http://jsfiddle.net/ckpx6esj/1/

我希望有人可以给我一个想法，如何应用.val（）或完全使用其他东西来使这个也适用于chrome。

最诚挚的问候和提前谢谢！

Answer 1

问题是你将文字放在图片标签中了！

<img>Some text</img>

这是无效的HTML，请参阅this answer。

如果您想在图片上显示文字，建议您使用div代替background: url(...)。

Updated fiddle

Answer 2

我能想到的最聪明的事情就是不要搞砸你的for循环，而是附加一个<p>标签，其中包含你的文字，并在mouseleave上删除它：

for (var i=0; i<3; i++){
                $('#' + i).on("mouseenter",function() { 
                        $(this).parent().append("<p>text</p>"); 
                    });
                $('#' + i).on("mouseleave",function() { 
                        $(this).parent().find("p").remove(); 
                });
}

小提琴：

http://jsfiddle.net/ckpx6esj/2/

此外，由于您正在收听image（<img>）而不是span，因此文字无效。图片没有.text()原型，因此如果您想使用parent()原型，而是使用{{{}}，则应该访问其<span>（在这种情况下为.text()） 1}}在父级上删除图片，因此想要附加文本并稍后删除它。

Answer 3

根据规范，val() function是设置值属性，它只对页面上的输入字段有用。 text() function用于更改元素的内容。

.val（）方法主要用于获取表单元素的值例如input，select和textarea。

因此，您应该在代码中使用text()函数。

另外根据您的代码，您可以更改<img>元素的文本属性。这个不好。您应该更改<span>的文字。因此，只需将您的ID移至span元素。

Answer 4

如果您希望jQuery等同于Javascript的原生innerHtml，请转到$(this).html('text');。

看看这些功能：

http://api.jquery.com/html/

$(this).html('text');

http://api.jquery.com/append/

$(this).append('text'); // Note that this appends instead of replaces

http://api.jquery.com/val/

$(this).val('text');

或者如果你有冒险精神：

http://api.jquery.com/appendto/

$('text').appendTo($(this)); // Performance penalty for creating an object out of 'text'

Answer 5

首先我将使用class而不是id，它将使用第二个循环保存，另外如果你想要文字和图像你也可以做到但是它会很复杂我会建议添加一些子元素到包含文本的范围，我不是为了挑战 http://jsfiddle.net/ckpx6esj/5/

在不更改html元素的情况下更改文本的简单插件

$.fn.selectorText = function(text) {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType === 3) {
            if(typeof(text) === 'string'){
                this.textContent = text;
                return false;
            }else{
                str += this.textContent || this.innerText || '';
            }

        }
    });

    return str;
};


var thisData = [{
    'coords' : [[100,100], [300, 300], [200, 200]],
    'size' : [[30, 30], [30, 30], [30, 30]]
}];
var data = thisData[0];

(function(){

    for (var i = 0; i < 3; i ++){
        var span = document.createElement("span");
        span.setAttribute('class','spanImage');
        span.style.position = "absolute";
        span.style.left = data.coords[i][0] + "px";
        span.style.top = data.coords[i][1] + "px";
        span.innerHTML = "\n<img width=\"" + data.size[i][0] + "\" height=\"" + data.size[i][1] + "\" id=\"" + i + "\">";
        document.body.appendChild(span);
    }


$('.spanImage')
  .on( 'mouseenter', function() {
   $(this).selectorText('text');    
  })
  .on( 'mouseleave', function() {
   $(this).selectorText('');
  });
}());

不使用.text（）在div上写文本

5 个答案: