从div /容器中获取链接href值并导航至该值

Question

我基本上是在创建一个可点击的容器，它是一个列表元素。 list元素中有一个不可见的锚标记。 单击list元素时，Jquery应该从list元素内的定位标记中提取href值，将该href值存储在变量中，然后使用该变量导航到链接。 “单击列表元素”部分效果很好，但是列表值中链接的href值始终显示为未定义。 救命？ 这是我的代码：

HTML：

<div class="dated-listing>
    <ul>
        <li>
            <a class="no-display" style="visibility:hidden" href="http://www.google.com"></a>
        </li>
    </ul>
</div>

jQuery：

$('.dated-listing ul li').click(function(){
    var x = $('a.no-display', this).attr('href');
    window.location.href = x;
});

Answer 1

您可以使用data-url属性，而不要添加隐藏的锚标记。

这样做是为了做到这一点：

<div class="dated-listing">
    <ul class="test">
        <li data-url="http://www.google.com">dfdsf</li>
    </ul>
</div>

和脚本：

$(document).ready(function(){

$('.dated-listing').on('click','li',function(){

    alert($(this).data('url'))
    window.location.href = $(this).data('url');
});

    });

这是小提琴演示

Answer 2

使用以下

<body>
  <div class="dated-listing">
    <ul>
        <li>
            <a class="no-display" style="visibility:hidden" href="http://www.google.com">hi</a>
        </li>
    </ul>
  </div>

    <script type='text/javascript'>//<![CDATA[ 
        $('.dated-listing ul li').click(function(){
            var x = $('a.no-display', this).attr('href');
            window.location.href = x;
            alert(x);
        });
    </script>
</body>