0

我正在尝试构建一个幻灯片编辑器。我想获取不同 div 的内容（标题、描述、图像），以便将它们放在表单中供客户编辑。我可以编辑其他人的代码，但尝试编写自己的代码对我来说是新的。

我有一个函数来查找 div 的内容并将其放入数组中。我不知道如何使用该功能。我有几个具体的问题。

--如何定义函数从中获取 div 的文档。有没有办法使用变量来定义文档？--如何使用从函数中检索到的内容。我是否调用该函数，然后像往常一样使用数组（如使用循环）？

这是我正在使用的代码：

function getdivHTML(file){
var divArray = file.getElementsByTagName("div");
for(var i=0; i<divArray.length; i++){
    if(divArray[i].className=="image-title") return divArray[i].innerHTML;
}
}

如果有任何其他提示或建议，我将永远感激不尽。试图找到能够创建此功能的工具已经够难了。我一直找不到任何关于尝试做我想做的事情的真正提示或教程。如果 JavaScript 以外的东西会更好，我愿意接受建议。如果有一种方法可以在文本编辑器（我使用的是 tinymce）中编辑幻灯片，那就更好了。

我已经对代码进行了一些编辑。我添加了“文件”作为传递给函数的变量。我可以在“文档”通常所在的位置替换文件吗？

作为整个文件的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<center><h1>1 Car 1 Story Garages</h1></center>
<div id="gallery" class="content">
    <div id="controls" class="controls"></div>
    <div class="slideshow-container">
        <div id="loading" class="loader"></div>
        <div id="slideshow" class="slideshow"></div>
    </div>
    <div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">

<ul class="thumbs noscript">
    <li>
        <a class="thumb" href="images/garages/1car1story1.png">
            <img src="images/garages/1car1story1.png" alt="1 Car 1 Story Garage 1" height="100px" width="130px" />
        </a>
        <div class="caption">
            <div class="image-title">1 Car 1 Story Garage 1</div>
            <div class="image-desc">12x24 Vinyl A-Frame with optional cupola</div>
        </div>
    </li>

    <li>
        <a class="thumb" href="images/garages/1car1story2.png">
            <img src="images/garages/1car1story2.png" alt="1 Car 1 Story Garage 2" height="100px" width="130px" />
        </a>
        <div class="caption">
            <div class="image-title">1 Car 1 Story Garage 2</div>
            <div class="image-desc">12x24 Duratemp A-Frame w/ optional Stockton glass</div>
        </div>
    </li>

    <li>
        <a class="thumb" href="images/garages/1car1story3.png">
            <img src="images/garages/1car1story3.png" alt="1 Car 1 Story Garage 3" height="100px" width="130px" />
        </a>
        <div class="caption">
            <div class="image-title">1 Car 1 Story Garage 3</div>
            <div class="image-desc">12x24 Vinyl High Wall Dutch Barn</div>
        </div>
    </li>

    <li>
        <a class="thumb" href="images/garages/1car1story4.png">
            <img src="images/garages/1car1story4.png" alt="1 Car 1 Story Garage 4" height="100px" width="130px" />
        </a>
        <div class="caption">
            <div class="image-title">1 Car 1 Story Garage 4</div>
            <div class="image-desc">14x24 Vinyl A-Frame with optional tin roof</div>
        </div>
    </li>
</ul>
</div>
<hr /><hr />
<script>
var alldivs = document.getElementsByTagName("div");
    var slides = [];
    var details = [];

    // Find the slides
    for (var i = 0; i < alldivs.length; i++) {
        if (alldivs[i].className.indexOf("slide") != -1) {
            slides.push(alldivs[i]);
        }
    }

    for (var i=0; i<slides.length; i++){
        var slide = slides[i];
        var title = slide.getElementsByClassName("image-title")[0];
        var description = slide.getElementsByClassName("image-desc")[0];
        var image = slide.getElementsByTagName("img")[0];

        details.push({
            "title": title.innerHTML,
            "description": description.innerHTML,
            "image": image.src
        });
    }

    for (i=0;i<details.length;i++){
        document.write(details[i] + "<br >");
    }
</script>
4

1 回答 1

1

好的，我正在尝试了解您的问题...

如果您有一些带有一个或多个块的 HTML，如下所示：

<div class="slide">
    <h2 class="title">Image Title</h2>
    <p class="description">This b da first image.</p>
    <img src="http://lorempixel.com/400/200/">
</div>

你可以得到这样的细节：

var alldivs = document.getElementsByTagName("div");
var slides = [];
var details = [];

// Find the slides
for (var i = 0; i < alldivs.length; i++) {
    if (alldivs[i].className.indexOf("slide") != -1) {
        slides.push(alldivs[i]);
    }
}

for (var i=0; i<slides.length; i++){
    var slide = slides[i];
    var titl = slide.getElementsByClassName("title")[0];
    var description = slide.getElementsByClassName("description")[0];
    var image = slide.getElementsByTagName("img")[0];

    details.push({
        "title": titl.innerHTML,
        "description": description.innerHTML,
        "image": image.src
    });
}
for (var i=0; i<details.length; i++) console.log(details[i].description);

看到这个 jsFiddle

这是您要查找的信息吗？

您可能应该使用 jQuery。它使这样的事情变得容易得多。

于 2013-06-04T03:16:05.090 回答