Question

我想知道如何使用jquery .load（）加载文本，然后修改文本并将其作为信息文本显示在图像前面。

任何可以实施的指示？我对jquery很新。

由于

编辑：

很抱歉这是我尝试过的：

    $().load("image1.jpg.txt");

但是我坚持认为如何将它存储到类元素或变量中以便我可以显示它。我熟悉使用html并导入一个图像并使用css来修改和移动它，但我在做相反的方面感到困惑，因为我们从jquery加载而不是将它放在图像上。

Answer 1

查看documentation

中的示例

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

你只需把它放在图像上的某个容器上

<div class='image-box'>
  <img src='...'/>
  <span id='img-description'></span>
</div>

JS中的

 $( "#result" ).load( "ajax/test.html", function(data) {
      $('#img-description').html(data);
      //or you can change data before puting to span
    });

我希望你能写一些ccs来覆盖img上的span吗？

Answer 2

假设我理解正确，您可以使用CSS定位元素将包含原始文本的内容定位在包含您的图像的另一个div下面，通过CSS定位元素： Positioning: W3Schools

所以...说你有两个像这样的div，使用CSS定位：

<div id="myText"></div>
<div id="myImage"></div>

然后你可以在jQuery中做这样的事情：

$(document).ready(function() {
    var $myText = $("#myText");
    $myText.text("Hello!");
    $myText.css("z-index", "2");
    $("#myImage").css("z-index", "1");
}

在这种情况下，它会在页面加载时设置它。

或者，您可以使用bootstrap工具提示，它将显示有关悬停的信息： Bootstrap Tooltips

JQuery Span和HTML信息标记

2 个答案: