Question

我有一个特殊的问题，我似乎无法绕过我的脑袋。我正在使用reddit api来获取数据。

已更新

$(function() {

  console.log("is it loading")

  axios.get('http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot')
  .then(function(data){
    var q;
    for(var i = 2; i < data.data.data.children.length; i++){
      q = data.data.data.children[i];
      $('#main').append('<h4>' + q.data.title + '</h4><br><button class="btn btn-success trigger">answer</button><div class="answer">'+ q.data.selftext +'</div>')


      $('.answer').hide()


      $('.trigger').click(function(e){
        e.preventDefault()
        console.log("clicked", [i]);
        $('.answer').show()
      })
    }
  }).catch(function(error){
    console.log("error occured")
  })
})

所以基本上我想用#trigger来展示答案。但问题在于，当我单击#trigger按钮时，数组显示27个计数而不是实际计数为26.当我单击#trigger按钮时，它会以某种方式添加一个计数。现在我无法点击按钮来显示答案。任何帮助将不胜感激

Answer 1

试试这个并看看。它没有进行查找。它在元素上使用/绑定它们。更好的方法可能是使用具有上下文查找的委托侦听器。

    axios.get('http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot')
        .then(function(data) {
            var $main = $('#main');

            //use slice so you can use forEach instead of rolling your own for loop
            data.data.data.children.slice(2).forEach(function(child){
                //instead of looking up trigger, create it so you can do whatever you want with it
                var $trigger = $('<button class="btn btn-success">answer</button>');
                //same with answer
                var $answer = $('<div class="answer">'+ child.data.selftext +'</div>');

                $answer.hide();

                $trigger.on('click', function(e){
                    e.preventDefault();
                    $answer.show();
                });

                $main
                    .append('<h4>'+ child.data.title +'</h4><br>')
                    .append($trigger)
                    .append($answer);
            });
        }).catch(function(error) {
            console.log("error occured")
        });
    });

jQuery在for循环中追加

1 个答案: