从 div/container 中获取链接 href 值并导航到它答案

【问题标题】：Get link href value from within div/container and navigate to it从 div/container 中获取链接 href 值并导航到它
【发布时间】：2014-06-05 04:10:05
【问题描述】：

我基本上是在创建一个可点击的容器，它是一个列表元素。列表元素中有一个不可见的锚标记。单击列表元素时，Jquery 应该从列表元素中的锚标记中提取 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;
});

【问题讨论】：

它的隐藏元素，所以它的未定义
天啊！我多么愚蠢。当然可见性：隐藏意味着链接根本不会显示，Jquery 也不会找到它。我应该在页面启动时查看源代码。一旦我将链接的样式更改为 opacity:0，我就得到了想要的效果，并且 li 元素导航到了页面。右引号的意外遗漏是因为我将代码手动输入到 stackoverflow 中而不是复制它，但我页面中的实际代码并没有丢失右引号。非常感谢！
lol...style="visibility:hidden" 还好...你的眼睛看不到元素，但 jQuery 可以...
忘记任何关于隐藏元素对 jQuery 不可见的 cmets。那明显是错的。除了在第一个 div 上忘记关闭 " 之外，您的代码就可以了：jsfiddle.net/TrueBlueAussie/9WtW4

标签： jquery html hyperlink clickable

【解决方案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');
});

    });

Here is Fiddle DEMO

【讨论】：

虽然这是一种替代方法，但原始代码 除了错字（在 div 上缺少 "）并没有任何问题。

【解决方案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>

【讨论】：

您忘记关闭行情"
+1：这是正确答案。除了一个简单的错字（使 HTML 无效）之外，原始代码原样完美。