Question

我试图通过添加一个数据ID或从当前数据中减去一个数据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值中添加或减去？或者它现在只是一个字符串，需要先转换为数字？我试图改变在同一地点显示的项目容器。当按钮与班级＆＃39; next-project＆＃39;单击，当前项目将隐藏，下一个项目将显示。

解决使用此功能似乎有效。

$(".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()时，将返回数字类型

您有语法问题

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

应该是

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

Answer 2

此？

$('.project-container[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)
        .show("slide", { direction: "right" }, 1000)
        .addClass('project-flex')
    ;

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

jQuery点击目标数据＆＃39; id＆＃39; + 1

2 个答案: