Question

我正在尝试使用changePost函数更改x的值。

当触发changePost函数时，它应该将x的值更改为相应的帖子[i]。

   var x = 0; var title = posts[x].title, date = posts[x].date, content = posts[x].content, author = posts[x].author;
      <article>
        <h2>$title</h2>
        <small>$date.format()</small>
        <p>$content</p>
        <cite>$author</cite>
      </article>

      for(var i in posts) { var title = posts[i].title, date = posts[i].date, content =   posts[i].content, author = posts[i].author;
      <article>
        <h3 onclick="changePost()">$title</h3>
        <small>$date.format()</small>
      </article>
      }
    </aside>

    function changePost(){ var x = i; };

感谢。

Answer 1

您的问题不只是更改x值，每次更改x时都必须重新呈现模板。

var main_template = document.getElementById('mainTemplate').innerHTML;
function changePost(x) {
    main.post_id = x;
    document.getElementById('main').innerHTML = T(main_template, main);
}

这是小提琴：http://jsfiddle.net/bcq7580s/5/

替代方法是渲染所有帖子，通过CSS隐藏所有帖子，然后当用户点击链接时，隐藏所有可见的帖子，然后只显示用户选择的帖子。

Answer 2

我知道你想通过点击下一个按钮浏览一系列帖子。我建议您将帖子模板，浏览后功能和必须触发帖子内容更改的事件分开。

要创建模板，您可以使用Underscore's template function。或EJS。可能还有很多其他模板库。

为了操纵dom，我会建议jQuery，但你可以不用。

在尝试访问页面中的元素之前，请确保已加载所有HTML。

访问this JS Fiddle

标记：

<div id="post"></div>
<a href="#" id="next">next</a>

代码：

// A simple wrapper for your posts so your index variable cant be overwritten 
// by some other peace of code
var posts = (function() {

    // The template for the posts, using Underscore's template function
    var tpl = _.template("<h2><%= title %></h2><p><%= content %></p>");

    // The index of the current post
    var index = 0;

    // The array of posts
    var posts = [
        {title:"Title 1", content:'Bla bla lorem'},
        {title:"Title 2", content:'Bla bla ipsum'},
        {title:"Title 3", content:'Bla bla dolor'},
        {title:"Title 4", content:'Bla bla sit'},
        {title:"Title 5", content:'Bla bla amet'}
    ];

    // The functions available to the document
    return {
        next:function(){
            if(++index >= posts.length) {
                index = 0;
            }
            return tpl(posts[index]);
        },
        load:function(){
            return tpl(posts[index]);
        }
    }
}());

// Use of your posts object by the html document
document.getElementById('post').innerHTML = posts.load();
document.getElementById('next').onclick = function(){
    document.getElementById('post').innerHTML = posts.next();
}

JavaScript使用onclick（）函数更改值

2 个答案: