Adapting JQuery loops in wordpress?

I am trying to convert a HTML theme into WordPress and may be this is a noob question and with my keywords it is impossible to find an answer. In original template’s custom.js, it has a loop:

$(".navigation-link-1").on("mouseover", function () {
    $(".project-preview").css({
        "background-image": "url(img/portfolio/img-1.jpg)"
    });
});

$(".navigation-link-2").on("mouseover", function () {
    $(".project-preview").css({
        "background-image": "url(img/portfolio/img-2.jpg)"
    });
});

$(".navigation-link-3").on("mouseover", function () {
    $(".project-preview").css({
        "background-image": "url(img/portfolio/img-3.jpg)"
    });
});

How do I convert this loop for my custom post types ? I am thinking of options inside functions.php or template but i cannot figure with my basic wordpress knowledge. Can you help me ?

Thanks