将动态ID值传递给jQuery div跳转至函数

Question

我被困在jQuery div跳到问题。 问题是我正在创建动态<a href="" id="1_1"></a>而动态div也说<div id="1_1_div"></div>我正在使用以下jquery函数滚动到特定的div

<script>
        $(document).ready(function (){
            $("#click").click(function (){
                alert ("test");
                //$(this).animate(function(){
                    $('html, body').animate({
                        scrollTop: $("#div1").offset().top
                    }, 1000);
                //});
            });
        });
    </script>

我的问题是如何将动态ID传递给$("")我们将不胜感激。

Answer 1

字符串串联：

$("#" + this.id + "_div").offset().top

请注意，不需要创建唯一的ID，因为具有树状结构的DOM对提供了许多遍历和选择目标元素的方法。

由于您是动态生成元素的，因此您还应该委派事件，因此可以向元素添加类并使用on方法：

$('#aStaticParentElement').on('click', '.anchors', function() {
   // TODO:
   // select the target element either by traversing 
   // or by using an identifier
});

Answer 2

$(document).ready(function (){
        $(".click").click(function (){
            alert ("test");
            var divID = '#' + $(this).attr('id') + '_div';
                $('html, body').animate({
                    scrollTop: $(divID).offset().top
                }, 1000);
        });
    });

并添加<a class="click" ...

Answer 3

在这里可视化

首先，由于您具有多个链接，因此请使用一个类来对它们进行分组：

的HTML

<a href="#" id="1_1" class="click">Click me 1_1</a>
<a href="#" id="1_2" class="click">Click me 1_2</a>    
<a href="#" id="1_3" class="click">Click me 1_3</a>

jQuery的

$(document).on('click', '.click', function (e) {
    var theID = $(this).attr('id');
    $('html, body').animate({
        scrollTop: $('#' + theID + '_div').offset().top
    }, 1000);
    return false;
});

我这样做的前提是您正在动态创建这些链接（因此委托）。 如果它们是静态的并且在页面加载期间不会改变，则可以使用$('.click').click(function()...代替$(document).on('click', '.click', function()...

Answer 4

用户这条线

$("#" + $(this).attr("id") + "_div").offset().top

...