случайный баннер с отдельной ссылкой на Shopify

#javascript #shopify #liquid

#javascript #Shopify #жидкость

Вопрос:

Ниже у меня есть код, который показывает один из предустановленных баннеров случайным образом.

Однако я хочу иметь отдельную ссылку для каждого баннера.

Как вы можете видеть в коде, в настоящее время он имеет только одну одинаковую ссылку для каждого баннера. Может кто-нибудь посоветовать?

 <script type="text/javascript">
  var imageCount = 4;
  $(function(){ 
    var whichImage=get_random();
    var image=new Array(imageCount)
    image[0] = "<img src="{{ 'HADER-AO-UNTUK-DI-BI-5.jpg' | asset_url }}" />";
    image[1] = "<img src="{{ 'HADER-AO-UNTUK-DI-BI-6.jpg' | asset_url }}" />";
    image[2] = "<img src="{{ 'HADER-AO-UNTUK-DI-BI-7.jpg' | asset_url }}" />";
    image[3] = "<img src="{{ 'HADER-AO-UNTUK-DI-BI-8.jpg' | asset_url }}" />";  
    function get_random() { 
      var ranNum= Math.floor(Math.random()* imageCount );
      return ranNum;
    }
    $('#randimage p a').prepend(image[whichImage]);
  });
</script>

<div id="randimage" align="center"><p><a href="https://alatolahraga.id"></a></p></div>
  

Ответ №1:

Есть несколько способов, это не самый лучший, но он подходит для вашего кода.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        const image= [
            "<a href="https://alatolahraga.id"><img src="{{ 'HADER-AO-UNTUK-DI-BI-5.jpg' | asset_url }}" /></a>",
            "<a href="https://alatolahraga.id"><img src="{{ 'HADER-AO-UNTUK-DI-BI-6.jpg' | asset_url }}" /></a>",
            "<a href="https://alatolahraga.id"><img src="{{ 'HADER-AO-UNTUK-DI-BI-7.jpg' | asset_url }}" /></a>",
            "<a href="https://alatolahraga.id"><img src="{{ 'HADER-AO-UNTUK-DI-BI-8.jpg' | asset_url }}" /></a>"
        ];
        const whichImage=get_random();
        function get_random() {
            return Math.floor(Math.random() * image.length );
        }
        $('#randimage p').prepend(image[whichImage]);
    });
</script>

<div id="randimage" align="center"><p></p></div>