javascript - 点击目标数据 'id' + 1 上的 jQuery

Question

我正在尝试找到一种方法，通过在当前数据 ID 上加一个或减去一个来定位点击数据 ID。

$(".next-project").click( function () {

    $( '#project-container' + $(this).data( ('id') + 1 ) ).show("slide", { direction: "right" }, 1000).addClass('project-flex');

    $('.wrapper').css('opacity', '.32');
});

在我的 html 中，我的 div 具有数据 ID，例如

<div class="project-container" id="project-container1"></div>
<div class="project-container" id="project-container2"></div>
<div class="project-container" id="project-container3"></div>

虽然每个 div 看起来像:

 <div class="project-container" id="project-container2">
  <div class="project-side-left">
    <div class="close-project">
      <img src="img/icons/icon-x.svg" alt="Close">
    </div>
    <p class="project-category">Web Design</p>
  </div>
  <div class="project-wrapper">
    <div class="project-top-bar">
      <a class="previous-project">Previous Project</a>
      <button class="next-project">Next Project</button>
    </div>
    <img class="project-img" src="img/projects/marz-01.png">
    <h2>Marz</h2>
    <p>project background</p>
    <img class="project-img" src="img/projects/cacaosuyo-01.png">
  </div>
</div>

是否可以从数据 id 值中添加或减去？还是现在只是一个字符串，需要先转换为数字？我正在尝试更改在同一位置显示的项目容器。单击类为“下一个项目”的按钮时，当前项目将隐藏，下一个项目将显示。

已解决使用此功能似乎可行。

$(".next-project").click( function () {
    let next_id = '#' + $(this).parents('.project-container[id]:eq(0)')
            .attr('id')
            .replace(/(\d+)$/, function (s)
            {
                return parseInt(s) + 1;
            });
    $(next_id).addClass('project-flex');

});

感谢您的帮助!

Answer 1

一般当data属性包含数值时data()会返回number类型

虽然你有语法问题

$('#project-container' + $(this).data( ('id') + 1 ) )

应该是

 $( '#project-container' + ($(this).data('id') + 1 ) )
                                       // ^^ only property name inside ()