点击时增加数据属性答案

【问题标题】：Increase data attribute on click点击时增加数据属性
【发布时间】：2017-06-09 16:23:59
【问题描述】：

一个非常烦人的，我已经完成了最难的部分，但是当单击“下一个”元素时，我试图增加“内容”元素上的“数据 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>

【问题讨论】：

标签： jquery attributes click counter

【解决方案1】：

代码

counter + 1;

计数器加 1，但结果不做任何事情。

你需要更新计数器变量：

counter = counter + 1;

或

counter += 1;

完成此操作后，您可以根据更新后的计数器.hide() 旧值和.show() 新值。更新了 sn-p：

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>

那么你只需要在下一个/上一个上添加范围检查

我正在尝试增加“data-id”

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

如果您确实想更新 data-id，您可以使用：

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

【讨论】：