如何使用Javascript匹配不同数组中的字符串

Question

I'm creating a script in Google Optimize for a travel website. The idea is to return random strings from an array in order to display a tip in the search bar, eg "Try searching for [location]". However, there are two search bars; if you click on the first one it unfolds and a second one appears.

Right now, the same line is displayed in both search bars.

Rather than one array that contains both the destinations and hotel names I would like to create two arrays, one with the destinations and one with the hotel names. Is there a way to link each string to another one from a different array, for example by giving them values.

Try searching for Spain and then in the second search bar try [Spanish hotel].

Check the screenshot below

 $(".vak-field__cover:first").on("click", function(){ var texts = ["Egypt", "Spain", "Creta", "France", "Fuerteventura", "Bali", "Sicily", "Turkish Riviera", "Mallorca", "Gran Canaria", "Mirador Maspalomas", "Vila Sal Azul", "Millor paradiso playa", "Cinc plats *3", "Portobello village", "Main star park 5*", "Sam's treasure trove"] ; var randomNumber = Math.floor(Math.random() * 17); console.log(randomNumber); $( ".vak-quicksearch__placeholder:first" ).html( "You could search for \\"" + texts[randomNumber] + "\\"" ); $( ".vak-field>input" ).attr( "placeholder", "Try \\"" + texts[randomNumber] + "\\"" ); });

Answer 1

It makes little sense having two, very disparate forms of data (countries and hotels) in one array.

Instead you need a data model that relates these two things.

Something like:

//prep nested, relational data
let data = [
    {
        name: 'Egypt',
        hotels: [
            'Egypt hotel 1',
            'Egypt hotel 2'
        ]
    },
    {
        name: 'Spain',
        hotels: [
            'Spain hotel 1',
            'Spain hotel 2'
            /* etc */
        ]
    },
];

//establish random location and hotel of that location
let rand_location = data[Math.floor(Math.random() * data.length)];
let rand_hotel = rand_location.hotels[Math.floor(Math.random() * rand_location.hotels.length)];

//output
$( ".vak-quicksearch__placeholder:first" ).html( "You could search for \"" + rand_location.name  + "\"" );
$( ".vak-field>input" ).attr( "placeholder", "Try \"" + rand_hotel + "\"" );

Also note I made dyanmic your random generator; you hard-coded it to 17 (the number of items in your array); better is to have it read from the genuine length of the array, so your code doesn't break when you add to or remove items from your data.