Discuss / JavaScript / 有两行代码没看懂

有两行代码没看懂

Topic source

请问这段代码

$.fn.external = function () {
    // return返回的each()返回结果,支持链式调用:
    return this.filter('a').each(function () {
        // 注意: each()内部的回调函数的this绑定为DOM本身!
        var a = $(this);
        var url = a.attr('href');
        if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
            a.attr('href', '#0')
             .removeAttr('target')
             .append(' <i class="uk-icon-external-link"></i>')
             .click(function () {
                if(confirm('你确定要前往' + url + '?')) {
                    window.open(url);
                }
            });
        }
    });
}

.removeAttr('target')
.append(' <i class="uk-icon-external-link"></i>')

这两行有什么用呀?没有看懂……廖老师我是不是nc问题太多了QAQ

廖雪峰

#2 Created at ... [Delete] [Delete and Lock User]

<a href="http://example.com/" target="_blank">Example</a>

.attr('href', '#0')

==> <a href="#0" target="_blank">Example</a>

.removeAttr('target')

==> <a href="#0">Example</a>

.append(' <i class="uk-icon-external-link"></i>')

==> <a href="#0">Example <i class="uk-icon-external-link"></i></a>

廖老师把对HTML的分布操作步骤写出来了,以纯新手的视角解释下:

1、把href里的链接值为#0,这样用户直接点链接就无法跳转到该地址了。

2、把target属性删除,因为target="_blank"会新开一个浏览器空白窗口。

3、加上一个\<i\>标签,对应的是在链接文字后面加一个提示的图标。

总体来将就是阻止用户直接点开链接,让其通过确认弹窗来做跳转。

天舞商城

#4 Created at ... [Delete] [Delete and Lock User]

新手视角 解释的非常完美 谢谢啦

非常感谢这个解释。

Rainsho

#6 Created at ... [Delete] [Delete and Lock User]

这种链式调用看的好爽~

SpringShaw

#7 Created at ... [Delete] [Delete and Lock User]

关键在这里啊, 点击时 window.open(url) 在新窗口打开链接.

 .click(function () {
                if(confirm('你确定要前往' + url + '?')) {
                    window.open(url);
                }
            });

而原来的链接

.removeAttr('target')  -> 你还想在哪打开???? 去掉
.attr('href', '#0') ->  保留链接样式,修改跳转目的地为: '#0'当前位置没变化 '#'页面头部
还可以自定义锚点  比如页面中有个锚点: <a  name='anchor'>  调到锚点: href='#anchor'

  • 1

Reply