jquery - 使用 jQuery 使用该元素自己的 CSS 属性之一来设置该元素的 CSS？

Question

我正在尝试向我的网络应用程序中的所有 JavaScript 脚本超链接添加标准样式。用虚线替换标准实线。这可以通过 CSS 来实现，但是有一个主要缺点，边框颜色与链接颜色不匹配。我想既然链接都是使用 JS 的，为什么不用 JS 来做呢？这是我尝试在 jQuery 中执行的操作。

$(function(){
    $('a.scripted').css({
        'text-decoration': 'none',
        'border-bottom': '1px dotted',
        'border-color': $(this).css('color'),
    });
});

但是，这不起作用。 $(this) 并不引用所选元素，这是有道理的。我的问题是，我该怎么做？我尝试像这样包装它:

$(function(){
    $('a.scripted').ready(function(){
        $(this).css({
        'text-decoration': 'none',
        'border-bottom': '1px dotted',
        'border-color': $(this).css('color'),
        });
    });
});

这也不起作用。建议？

编辑

此代码有效，但不适用于访问过的链接。我了解 jQuery 选择器 :visited 但如何在这种情况下使用它？

$(function(){
    $('a.scripted').each(function(){

        var $this = $(this);

        $this.css({
            'text-decoration': 'none',
            'border-bottom': '2px dotted',
            'border-color': $this.css('color'),
        });

        $this.hover(
            function()
            {
                $this.css({
                    'text-decoration': 'none',
                    'border-bottom': '1px dotted',
                    'border-color': $this.css('color'),
                });
            },
            function()
            {
                $this.css({
                    'text-decoration': 'none',
                    'border-bottom': '1px dotted',
                    'border-color': $this.css('color'),
                });
            }
        );

        $this.click(function(){
            $this.css({
                'text-decoration': 'none',
                'border-bottom': '1px dotted',
                'border-color': $this.css('color'),
            });
        });
    });
});

Answer 1

您可以使用each，然后在内部使用$(this)来为您提供对正在迭代的元素的引用。

$(function(){
    $('a.scripted').each( function() {
        var $this = $(this);
        $this.css({
           'text-decoration': 'none',
           'border-bottom': '1px dotted',
           'border-color': $this.css('color')
        });
    });
});