Javascript 基于URL从数组中随机显示

我有一个图像数组，我想在我的页面上随机显示，但是如果图像扩展名与url扩展名匹配，它应该跳过数组中的某个条目并转到下一个条目。这是到目前为止我的代码

$(document).ready( function() {
    //$('.test a').append('<img class="img-responsive portfolio-item thumbnail" src="http://placehold.it/500x300" alt="">');

    var imgs = ["img1.png","img2.png","img3.png","img4.png",]

    for ( var n=0; n < 4; n ++){
        var goImg = 'img/' +  imgs[n];
        n = parseInt(n);
        var pItem = 'pItem' +  (n + 1);
        $('#otherProjects').append('<div class="col-sm-3 col-xs-6">
            <a href="'+pItem+'.html">
                <img class="img-responsive portfolio-item thumbnail"
                src="'+goImg+'" alt=""> 
            </a>
         </div>');              
    }

});

---

如果调用appendImages方法，它将发送当前页面名，而不带扩展名。在方法内部，url名称将与数组值匹配，如果匹配，则跳过。

谢谢你，Raja，你的代码帮助我更接近我试图实现的目标。这是我到目前为止所拥有的，它正在按照我的需要工作，我的最后一步是让它从数组中随机选取4个项目，而不是前4个

$(document).ready( function() {



            //array of all portfolio items
            var imgs = ["pItem1","pItem2","pItem3","pItem4","pItem5"]

            //gets the current portfolio page you are on
            var pathname = window.location.pathname.split('/').pop('');
            pathname = pathname.substr(0, pathname.lastIndexOf('.'));


            //checks the imgs array and deletes the current portfolio entry
            var imgs = $.grep(imgs, function(i){
                return(i !== pathname );

            });

            //goes through the array and appends it to the page
            for ( var n=0; n < 4; n ++){

            var imgUrl = 'img/' +  imgs[n] +'.png';

            n = parseInt(n);
            var pItem = imgs[n]

            $('#otherProjects').append('<div class="col-sm-3 col-xs-6"><a href="'+pItem+'.html"><img class="img-responsive portfolio-item thumbnail" src="'+imgUrl+'" alt=""></a></div>');

        }

});

---

您的问题是…？将url与数组中的条目匹配的最佳方式是什么？即url为projects/pItem1，数组中的对应项为img1。如果这两个匹配，那么数组应该跳过该条目并转到下一个条目。您硬编码了url。你将来会使用动态url吗？就目前而言，我认为它们将保持静态，而不是我想要的。让我试着更好地解释。我有一系列静态页面bare/pItem2.html、bare/pItem3.html等等。。。对应于数组img1=pItem1中的图像的。我需要循环遍历数组并显示数组中的一组随机图像，但是应该跳过与我们所在页面对应的图像。因此，如果我在pItem1.html页面上，它将显示img2、img3、img4，目的是在页面的按钮上显示其他投资组合项目，但不是我们当前所在的项目。详细解释您的问题。如何使用jQuery读取html url，例如bare/pItem1.html，并将其与数组中的变量进行比较。pItem1=img1。弹出匹配的img，生成一个随机数，然后返回该索引

$(document).ready( function() {



            //array of all portfolio items
            var imgs = ["pItem1","pItem2","pItem3","pItem4","pItem5"]

            //gets the current portfolio page you are on
            var pathname = window.location.pathname.split('/').pop('');
            pathname = pathname.substr(0, pathname.lastIndexOf('.'));


            //checks the imgs array and deletes the current portfolio entry
            var imgs = $.grep(imgs, function(i){
                return(i !== pathname );

            });

            //goes through the array and appends it to the page
            for ( var n=0; n < 4; n ++){

            var imgUrl = 'img/' +  imgs[n] +'.png';

            n = parseInt(n);
            var pItem = imgs[n]

            $('#otherProjects').append('<div class="col-sm-3 col-xs-6"><a href="'+pItem+'.html"><img class="img-responsive portfolio-item thumbnail" src="'+imgUrl+'" alt=""></a></div>');

        }

});