单击时增加数据属性

Question

一个非常烦人的问题，我已经完成了困难的部分，但我试图在单击 "next" 元素时增加 "content" 元素上的 "data-id"。

所以基本上当 "data-question" 与 "data-id" 匹配时它就会显示。

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

谢谢

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);
  });
});

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

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

<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>

Answer 1

代码

counter + 1;

计数器加 1，但不对结果做任何处理。

您需要更新计数器变量：

counter = counter + 1;

或

counter += 1;

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

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();
  });
});

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

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

<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>

那么你只需要在 next/prev

上添加范围检查

I am trying to increase the "data-id"

您不需要更改 data-id，因为您使用的是局部变量（计数器）。

如果您确实想更新数据 ID，您可以使用：

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

单击时增加数据属性

Increase data attribute on click

jquery

attributes

counter

click