1

我正在尝试学习 HTML 和 Javascript/jQuery。如果我有一个包含标题、图像、描述和数字的容器，那么我想创建一个格式完全相同的新容器（除了值会不同），这通常是如何完成的？

这是我在每个项目中寻找的格式示例。

    <li>
        <div>
            <div>
                Image Name
            </div>
            <div>
                <a href=URL>
                    <img src='image_url'>
                </a>
            </div>
            <div>
                Description
            </div>
            <div>
                num_comment Comments
            </div>
         </div>
    </li>

我是否只是创建一个字符串并与图像的实际值连接，然后将该字符串添加到我保存的名为 html_content 的变量中，然后将 html 值设置为 html_content？这是这样做的常见方法还是有更好的方法？

编辑

为了更好地了解我目前在做什么，这里是 javascript：

    var html1 = '<li><div><div>';
    var html2 = '</div><div><a href="';
    var html3 = '"><img src="';
    var html4 = '"></a></div><div>';
    var html5 = '</div><div>';
    var html6 = '</div></div></li>';


  function render(pics){
    for (var i in pics){
      html = html + html1 + pics[i].name + html2 + pics[i].image_url + html3 + ...
    };
    $('pics').html(html);
  }
4

5 回答 5

0

You may find it useful to explore some of the JavaScript templating libraries. The essential idea is that you create a template of your markup:

<li>
    <div>
        <div>
            {{name}}
        </div>
        <div>
            <a href="{{url}}">
                <img src="{{imageUrl}}">
            </a>
        </div>
        <div>
            {{description}}
        </div>
        <div>
            {{comments}}
        </div>
     </div>
</li>

Then you merge it against some associated matching object and insert it into your document:

{ name: 'Image Name', 
  url: 'http://example.com', 
  imageUrl: 'http://example.com/image.jpg', 
  description: 'Description', 
  comments [ { text: 'Comment' } ] 
}
于 2013-05-24T19:05:46.937 回答
0

我认为这会很好地工作：

$('#button').click(function () {

    var html1 = '<li><div><div>';
    var html2 = '</div><div><a href="';
    var html3 = '"><img src="';
    var html4 = '"></a></div><div>';
    var html5 = '</div><div>';
    var html6 = '</div></div></li>';

    function render(pics){
        for (var i in pics){
            html = html + html1 + pics[i].name + html2 + pics[i].image_url + html3 + ...
            $("ul").append(html);
        }
    }
    // call render
});

我没有对您的代码进行测试运行，因此某处可能存在错误。我的调整$("ul").append(html);在你的循环中添加了这一行

于 2013-05-24T19:20:27.733 回答
0

在 jQuery 中，你只需要使用 append() 函数来添加一些东西。

你可以做类似...

$('select element').append('<li><div>....etc.');

在你想要一个不同的值的地方你可以使用一个变量。

于 2013-05-24T18:53:48.327 回答
0

您可以使用.clone()并创建它的副本，然后遍历克隆的对象并更改您需要的内容：

var $objClone = $("li").clone(true);

$objClone.find("*").each(function() {
    //iterates over every element. customize this to find elements you need.
});

要更改图像源，您可以执行以下操作：

$objClone.find("img").attr("src", "new/img/here.jpg");

小提琴演示概念：http: //jsfiddle.net/H9DnA/1/

于 2013-05-24T18:54:08.720 回答
0 
function render(pics)
{
    var theList = document.getElementByid("LIST ID");

    for (var i in pics){

      var listItem = document.createElement('li');  // Create new list item

      var nameDiv = document.createElement('div');  // Create name DIV element
      nameDiv.innerHTML = pics[i].name;             // Insert the name in the div

      var img = document.createElement('img');      // Create Img element
      img.setAttribute('src',pics[i].src);          // Assign the src attribute of your img

      var imgDiv = document.createElement('div');   // Create Img Div that contains your img
      imgDiv.appendChild(img);                      // Puts img inside the img DIV container

      var descDiv = document.createElement('div');  // Create Description DIV
      descDiv.innerHTML = pics[i].description;      // Insert your description



      listItem.appendChild(nameDiv);                // Insert all of you DIVs 
      listItem.appendChild(imgDiv);                 // inside your list item 
      listItem.appendChild(descDiv);                // with appropriate order.

      theList.appendChild(listItem);                // Insert the list item inside your list.

    }

}
于 2013-05-24T19:33:27.263 回答