传递动态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

String Concatenation：

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

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

由于您要动态生成元素，因此您还应该委派事件，可以向元素添加类并使用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

Visualize it here

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

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

...