1

所以在大家的帮助下，我终于在我的画廊网站上取得了一些进展，非常感谢。现在我有最后一个，希望是非常简单的问题。首先，这是场景：

由于我是 Javascript 新手，我正在尝试学习 javascript，因为我深入研究了 jquery，所以我尝试在（我相信这个术语）vanilla javascript 中做所有事情。在不深入所有代码的情况下，我为我的作品创建了一个画廊，该画廊在页面顶部有一个拇指滑块和一个显示所选作品（包括其他视图、描述、标题等）的字段。现在我没有采用多数组，而是构建了一个名为“gallery/php”的页面，该页面包含所有将被调用到该字段中的预构建 div（标题为“通用”）。使用InnerHTML，我正在制作一个简单的呼叫，以便选择所需的缩略图时，它调用相应的DIV通过ID并将其写入“通用”DIV。

够简单...

问题是我有大约 40 个，如果我做一个 php 包含并将包含隐藏在一个隐藏的 div 中而艺术品不显示它需要永远加载页面，这似乎是一个非常糟糕的主意。我想做的是修改我现在正在使用的函数，这样它就不会在当前页面上调用 id，而是知道要引用哪个外部页面以及要拉取和填充“通用”的 div（基于 id） div 与。该脚本当前如下所示：

function changeDiv(art) {
        viewer = document.getElementById('generic'),
        targetInfo = document.getElementById(art);
        viewer.innerHTML = targetInfo.innerHTML; 
}

我想做的是（忽略语法）：

function changeDiv(art) {
    viewer = document.getElementById('generic'),
    targetInfo = ***src = gallery.php, #(art);***
    viewer.innerHTML = targetInfo.innerHTML; 
}

我看到的唯一与我想做的类似的事情是 jquery 中的 .load() 但我不知道如何将其翻译回 javascript。

4

1 回答 1

0

行！这是我的尝试。请注意，虽然这可能应该通过 AJAX 库（如 jQuery）进行审查，但这不是 OP 所要求的。

**另外，我不知道gallery.php 的设置，所以我尽了最大努力。

**我也知道这很可怕，没有验证或其他任何好处，但这更多是概念证明。（那些实用程序员的跟踪代码）

假设您有一个 gallery.php 设置如下：

<?php
    $pull = $_GET["pull"];
    $gallery[0] = "<div>Your art work img tags here</div>";
    $gallery[1] = "<div>Some more art work</div>";
    //Pull from the changeDiv parameter in the JavaScript below.
    echo $gallery[$pull];
?>

我们将使用一些 JavaScript，如下所示：

var changeDiv = function(pull) {
    //Pull parameter indicates an array 
    //index within the gallery.php $gallery array

    var ajaxObj;

    //Our AJAX objet shall be declared
    if(window.XMLHttpRequest) {
        ajaxObj = new XMLHttpRequest();
    }
    else {
        ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //When the ajaxObj changes it's ready 
    //state, do this stuff below
    ajaxObj.onreadystatechange = function() {
        //But only if the ready state is 
        //really ready and the status is good to go
        if(ajaxObj.readyState==4 && ajaxObj.status==200) {
            var response = this.responseText;
            document.getElementById("viewer").innerHTML=response;
        }
    }
    //Open the async connection to 
    //gallery.php and send your GET 
    //global (pull)
    ajaxObj.open("GET","gallery.php?pull="+pull,true);

    //Send it and pray
    ajaxObj.send();
}

http://www.smashingmagazine.com/2008/10/16/50-excellent-ajax-tutorials/ - AJAX 的一些教程列表

于 2012-08-07T05:23:18.220 回答