Question

我正在使用jquery和ajax将缩略图图像和文本加载到HTML页面的DIV中。到目前为止，以下部分正在发挥作用。

HTML页面：

<!DOCTYPE html>
<html>
<head>
    <!-- jQuery library reference. -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <!-- jQuery/ajax to change content of ARTICLE on the HTML page.  -->
    <script type="text/javascript" src="javascripts/test1.js"></script>
    <!-- Reference to the LARGE IMAGE VIEW. -->
    <script type="text/javascript" src="javascripts/test2.js"></script>
</head> 
<body>


<div id="links">
    <h1>Select From Below</h1>
    <a href="#" id="link_one">One</a><br />
    <a href="#" id="link_two">Two</a><br />
</div>

<div id="article">
    <p>Text with a DIV of article.</p>
</div>

</body>
</html>

test1.js：

$(document).ready(function() {
    $.ajax({
        type: "get",
        url: "testA.html",
        timeout: 10000,
        error: function(xhr, status, error) {
            alert("<p>Error: " + xhr.status + " - " + error + "</p>");
        },
        dataType: "html",
        success: function(data) {
            $(document).ready(function(){
              $("#link_one").on("click", function(){
                $("#article").load("testA.html #imgThumb_one");
              });
              $("#link_two").on("click", function(){
                $("#article").load("testA.html #imgThumb_two");
              });
            });
        }
    });
});

EXTERNAL文件testA.html：

<div id="imgThumb_one">
    <a href="#article" id="linkToBig_one">
        <figure> 
            <img src="imageThumb_one.jpg" />
            <figcaption>
                Click for Larger Image
            </figcaption>
        </figure>
    </a>
</div>

<div id="imgThumb_two">
    <a href="#article" id="linkToBig_two">
        <figure> 
            <img src="imageThumb_two.jpg" />
            <figcaption>
                Click for Larger Image
            </figcaption>
        </figure>
    </a>    
</div>

因此，此时链接会将缩略图图像加载到ID为ARTICLE的DIV中。我试图能够点击最近加载的缩略图图像（嵌入在图片标签中），使用以下代码查看完整尺寸的图像，但是当我点击链接/图像时没有任何反应。作为一个jquery和ajax新手，我真的很感激所提供的任何帮助。谢谢。

test2.js：

$(document).ready(function() {
    $.ajax({
        type: "get",
        url: "testB.html",
        timeout: 10000,
        error: function(xhr, status, error) {
            alert("<p>Error: " + xhr.status + " - " + error + "</p>");
        },
        dataType: "html",
        success: function(data) {
            $(document).ready(function(){
              $("#linkToBig_one").on('click' function(){
                $("#article").load("testB.html #imgBig_one");
              $("linkToBig_two").on('click' function(){
                $("#article").load("testB.html #imgBig_two");
              });
              });
            });
        }
    });
});

EXTERNAL FILE testB.html：

<div id="imgBig_one">
    <img src="imageBig_one.jpg" id="big_one" />
</div>
<div id="imgBig_two">
    <img src="imageBig_two.jpg" id="big_two" />
</div>

Answer 1

你可以使用.html（）记住使用图像的绝对路径。

$("#imgBig_two").html('<img src="imageBig_two.jpg" id="big_two" />');

有关点击的更多文档以及您可以执行的操作。 http://api.jquery.com/html/

Answer 2

我找到了一种让我的代码工作的方法。问题是将SELECTOR更改为父DIV并放置＆＃34;＃linkToBIg_One＆＃34; CHILDSELECTOR＆＃34;＆＃39;点击＆＃39;，＆＃34;像这样：

  // this loads the large image One into the Article DIV.  
  $("#article").on("click","#linkToBig_one",function(){
    $("#article").load("testB.html #imgBig_one");
  });

但是，我会使用@ eddwinpaz＆＃39;建议并插入像这样的大图像：

  $("#article").on("click","#linkToBig_one",function(){
    $("#imgThumb_one").html('<img src="imageBig_one.jpg" />');
  });

Jquery和ajax将拇指图像加载到<div>中，然后用更大的图像重新加载<div> </div> </div>

2 个答案: