Question

我有一个名为links的变量，该变量存储以前访问过的所有URL。

我需要将页面上的URL与变量的结果相匹配。如果它们匹配，则将“已访问”类别分配给那些链接。

例如，如果我的页面具有：

<a href="link1.html">
<a href="link2.html">
<a href="link3.html">
<a href="link4.html">
<a href="link5.html">

并且links变量具有：

link1.html
link3.html
link4.html

在这种情况下，要向存储在变量link1.html，link3.html和link4.html中的链接添加“已访问”类。有很多带有各种文本的链接。这些只是一个简单的例子。

这是我到目前为止所拥有的：

$(document).ready(function() {
    $('#rightbox li a').each(

    function(intIndex){
        var links = $(this).attr('href');
        console.log(links);
        $.ajax({
            url: links,
            type:'HEAD',
            error: function() { },
            success: function() {
                var visited = (links)
                $("#visitedLinkContainer").append(visited);

                $(this).attr('href').addClass("visited");`
                // I tried this but it adds visited to everylink which I knew would, but I don't know what to put here`
            }
        });                     
    });
});

这是在家中的个人项目。我目前正在使用本地存储，但是如果可能的话，我更喜欢这样做。

感谢您收到的任何帮助

Answer 1

使用以下代码：

links.forEach(function(link) {
  $('#rightbox li a[href="' + link + '"]').addClass('visited');
});

jQuery选择器[<attribute>="<value>"]选择其<attribute>等于<value>的元素。

Answer 2

我创建了一个示例：https://codepen.io/anon/pen/OwMbgp

html

<a href="#1">Link1</a>
<a href="#2">Link2</a>
<a href="#3">Link3</a>
<a href="#4">Link4</a>
<a href="#5">Link5</a>
<a href="#2">Link2</a>

CSS

.visited {
  color: red;
}

JS

$(document).ready(function() {

// Faking that you already entered the first 2 links
var visited = ['#1', '#2'];

// when clicking it adds the class visited right away
  $( "a" ).click(function() {
    visited.push($(this).attr('href'));
    $(this).addClass( "visited" );
  });

// loop trough the visited url and find the corresponding a tags that all have the urls inside the visited variable
  $.each(visited, function( index, value ) {
    // this gets all links with that same value, if you don't want this you need to store something unique of the a tag or the entire element inside the var visited 
    var allLinks = $('a[href^="' + value + '"]');
    $.each(allLinks, function() {
       $(this).addClass( "visited" )
    })
    // this allert shows you what index and value are
    alert( index + ": " + value );
  });

});

希望这有所帮助

Answer 3

将此行[var links = $(this).attr('href');]转换为此：

var LINK = $(this), 
    links = LINK.attr('href');

现在，在第$("#visitedLinkContainer").append(visited);行之后，在这里而不是您的代码：

LINK.addClass("visited");

或尝试以下操作：

$("#rightbox [href='"+links+"']").addClass("visited");

Answer 4

for(var i=0; i<arrayOfLinksAlreadyVisited.length;i++) {
    $("#rightbox li a").each(function() {
        if($(this).attr("href") == arrayOfLinksAlreadyVisited[i])) {
            $(this).addClass("visited");
        }    
        //Match the href with  arrayOfLinksAlreadyVisited[i]
        //if true then addClass visited to this anchor tag via 
        //keyword this
        // else do nothing  
    });   
}

我希望以上逻辑对您有用。

将网址与变量中的文字进行比较

4 个答案: