Question

一个非常讨厌的人，我有困难的部分工作，但我正在努力增加＆＃34; data-id＆＃34;在我的＆＃34;内容＆＃34;元素当＆＃34; next＆＃34;单击元素。

所以基本上当＆＃34;数据问题＆＃34;匹配＆＃34; data-id＆＃34;它会显示出来。

我不确定为什么我的计数器+ 1不起作用，我们将不胜感激。

由于

＆＃13;

var root = 'https://jsonplaceholder.typicode.com/posts';

$.ajax({
  url: root,
  method: 'GET'
}).then(function(data) {
  console.log(data);
  $.each(data, function(i, item) {
    $('.content').append("<div class='box' data-question='" + data[i].id + "'>" + data[i].title);
  });
  var counter = $('.content').data('id');
  $('.box').hide();
  $('[data-question=' + counter + ']').show();
  
  $('.next').on('click', function() {
     counter + 1
     console.log(counter);
  });

  $('.previous').on('click', function() {
     counter - 1;
     console.log(counter);
  });
});

＆＃13;

.next {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
}

.previous {
  position: absolute;
  display: block;
  right: 100px;
  top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" data-id="1"></div>
<a class="previous" href="#">Previous</a>
<a class="next" href="#">Next</a>

＆＃13;

Answer 1

代码

counter + 1;

向计数器添加1，但对结果不做任何操作。

您需要更新计数器变量：

counter = counter + 1;

或

counter += 1;

完成后，您可以根据更新的计数器.hide()旧值和.show()新值。更新了代码段：

＆＃13;

var root = 'https://jsonplaceholder.typicode.com/posts';

$.ajax({
  url: root,
  method: 'GET'
}).then(function(data) {
  console.log(data);
  $.each(data, function(i, item) {
    $('.content').append("<div class='box' data-question='" + data[i].id + "'>" + data[i].title);
  });
  var counter = $('.content').data('id');
  $('.box').hide();
  $('[data-question=' + counter + ']').show();
  
  $('.next').on('click', function() {
     counter += 1
     console.log(counter);
     $('[data-question]').hide()
     $('[data-question=' + counter + ']').show();

  });

  $('.previous').on('click', function() {
     counter -= 1;
     console.log(counter);
     $('[data-question]').hide()
     $('[data-question=' + counter + ']').show();
  });
});

＆＃13;

.next {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
}

.previous {
  position: absolute;
  display: block;
  right: 100px;
  top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" data-id="1"></div>
<a class="previous" href="#">Previous</a>
<a class="next" href="#">Next</a>

＆＃13;

然后你只需要在下一个/上一个

添加范围检查

我正在尝试增加＆＃34; data-id＆＃34;

当您使用本地变量（计数器）时，您不需要更改data-id。

如果您确实想要更新data-id，请使用：

$('.content').data('id', counter);

单击时增加数据属性

1 个答案: