Question

我有这个html结构。

<div class="has_sub">
    <button class="btn">Select Branch</button>
    <button class="btn">Select Others</button>
    <ul class="dropdown-menu">
        <li><a href="#popup-magnific" data-link="http://www.prototype.laravel.com/dwayne-johnson">Dwayne Johnson</a></li>
        <li><a href="#" data-link="http://www.prototype.laravel.com/kyrie-irving">Kyrie Irving</a></li>
        <li><a href="#" data-link="http://www.prototype.laravel.com/allen-iverson">Allen Iverson</a></li>
    </ul>
<button class="gobtn">Go</button>
</div>

然后是一个jquery脚本

$('.dropdown-menu li a').click(function(){
    $(this).closest('.has_sub').find('.btn:first-child').text($(this).text()); //line 1
    $(this).closest('.has_sub').find('.btn:first-child').attr('data-link',$(this).attr('data-link')); //line 2
});

$('.gobtn').click(function(){
    alert($(this).closest('.has_sub').find('.btn:first-child').attr('data-link')); //line 3
});

从上面可以看到，第1行的功能是在父元素.has_sub中找到第一个子按钮（.btn），然后将其文本更改为等于当前单击的锚标记元素文本（.dropdown-菜单li a）。

第2行是从当前点击的链接（下拉菜单）获取属性“data-link”（例如，data-link =“http://www.prototype.laravel.com/allen-iverson”） li a）然后将其属性（数据链接）添加到第一个子按钮（.btn：first-child）。

第3行是警告（那个弹出式事物）其父级（.has_sub）的第一个子按钮元素的属性，但遗憾的是，它不起作用（第3行）。

第2行似乎无法添加属性，因为它返回undefined。

任何帮助，建议，想法，线索和推荐使这项工作成为可能吗？

Answer 1

在line 3上，由于没有附加数据属性，因此初始启动时，alert将返回undefined。单击链接后，它可以正常工作。看看 Demo 。

Answer 2

您好我可以查看我的演示并告诉我这是否是您想要的吗？

$('.dropdown-menu li a').click(function(){
    $(this).closest('.has_sub').find('.btn:first-child').text($(this).text()); //line 1
    $(this).closest('.has_sub').find('.btn:first-child').data('link',$(this).data('link')); //line 2
});

$('.gobtn').click(function(){
    alert($(this).closest('.has_sub').find('.btn:first-child').data('link')); //line 3
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="has_sub">
    <button class="btn">Select Branch</button>
    <button class="btn">Select Others</button>
    <ul class="dropdown-menu">
        <li><a href="#popup-magnific" data-link="http://www.prototype.laravel.com/dwayne-johnson">Dwayne Johnson</a></li>
        <li><a href="#" data-link="http://www.prototype.laravel.com/kyrie-irving">Kyrie Irving</a></li>
        <li><a href="#" data-link="http://www.prototype.laravel.com/allen-iverson">Allen Iverson</a></li>
    </ul>
<button class="gobtn">Go</button>
</div>

如果您想要解决的问题是选择数据属性，您可以在此处了解更多相关信息 https://api.jquery.com/data/

获取元素的data属性

2 个答案: