Incorporate multiple array values within an if statement

Looking to dynamically change the background image of an element based on specific strings in the URL. Rather than changing it for each individual term like "Site1", I want to be able to target multiple words. Here's what I've tried:

var urlstring = new Array( "Site1", "Site2", "Site3" ); //Change background if any of these words are in the URL

var imageUrl ="Path to image";

if(window.location.href.indexOf(urlstring) > -1) {
     $('#myelement').css('background-image', 'url(' + imageUrl + ')');
    }

I realize this may seem amateurish to some, but any expert assistance would be greatly appreciated (there are more similar tasks that need addressing...)

jquerycssarraysif-statement

Answer №1

Loop through every item in the array to verify if it exists in the URL:

urlstring.forEach(function(term) {
    if (window.location.href.includes(term)) {
        // ...
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent unexpected page breaks in <tr> elements on Firefox (Could JavaScript be the solution?)

Wondering if there are any ways, possibly through JavaScript or CSS, to avoid having page breaks within <tr> elements specifically in Firefox. Given that FF does not yet fully support page-break-inside, I assume this might need to be addressed using ...

javascriptcssfirefoxprintingpage-break

What is the best way to implement a switch that can simultaneously display both the on and off positions?

I need help customizing a toggle switch element in CSS. I want the first row to display as on (blue color) and the second and third rows to be displayed as off or grey. So far, my attempts to modify the CSS code have been unsuccessful. .switch { posi ...

javascriptjqueryhtmlcss

Displaying the outcome in the success section using ajax

Issue with data insertion into database using ajax: The output is not showing up in the success section. Please review my script and form code below for any errors. Code: <script> $(document).ready(function () { $('#data_form' ...

jqueryajaxcodeigniter

How to utilize JQ to find specific key, value pairs within a list of objects sharing identical keys

Consider the JSON object provided below: { "company1": { "employees": [ { "name": "John", "title": "CEO" }, { ...

arraysjsonlistjq

Issues with Adding Variable Products to Cart in Woocommerce

Hey there! I've been working on my woocommerce website and have added a variety of products, some single and some variable. The singles are all good to go, but I've run into an issue with the variable ones. Every time I try to add a variable prod ...

phpjquerywordpresswoocommerce

Showcasing Portfolio Work in a User-Friendly Mobile Design

Currently revamping my portfolio website and looking for ways to optimize the display of my personal projects. I have a card-like interface in place that works well on desktop but only shows one project at a time on mobile devices. Seeking solutions to imp ...

javascripthtmlcsssliderportfolio

Using jQuery and AJAX to fetch the return value of a PHP class method

Starting a new project for myself has been quite the learning experience. As someone who isn't the most skilled programmer, I decided to kick things off in PHP. However, I quickly realized that executing PHP functions and class methods through HTML bu ...

javascriptphpjqueryhtmlajax

Unable to delete borders within the container

Is there a way to eliminate the borders within this container? Visit this link for reference. I've tried using firebug but I can't seem to locate it... Appreciate any assistance you can provide. Thank you! ...

csswordpressborder

PHP and jQuery: tackling quotation mark problems in output

Need help with PHP output: $this->Js->buffer(" var searchTerm = $(this).html(); var searchId = $(this).attr('data-tag'); $('.tags').append('<input type='text' value='+searchTerm+' name=&apo ...

phpjqueryquote

Retrieving an AJAX array POST in Laravel 5 Controller

Below is the structure of my form: <td> <input type="text" name='name[]' class="form-control"/> </td> <td> <input type="text" name='mail[]' class="form-control"/> </td> <td> <select na ...

phpjqueryarraysajaxlaravel

Show an Array of Nested JSON API information on an HTML page using jQuery/JavaScript

Recently, I've delved into the world of jQuery, JavaScript, and AJAX while experimenting with an API that I designed. The backend result I received looks like this: [ { "id": 1, "choice_text": "They work on List View generally", ...

javascriptjqueryjsonajaxapi

Leveraging PHP JSON responses for decision-making in jQuery/JavaScript

Recently, a friend shared the following code snippet with me: json : { result: true } success function(data){ if(data.result) { //do something here } else { //do something here } } I'm curious how I can integrate that ...

phpjavascriptjqueryjson

Insert HTML elements into nested CSS classes

My goal is to utilize jQuery for looping through classes and adding text to an HTML element. I am currently working with the following example HTML: <div class="question"> <div class="title"> <strong>Here's the question ...

javascriptjqueryhtmlcss

What is the best way to apply the .addClass('active') method to a specific item in a Bootstrap carousel?

I'm looking to create a modal carousel using Bootstrap and incorporating PHP into the mix. Here is the code I currently have for displaying image previews: <?php $directory = "images/*"; $imagenes = glob($directory.'{jpg,JPG,jpeg,JPEG,g ...

jquerycarousel

Unexpected lag causing delays in jQuery animations

I am attempting to implement a "hover" effect using jQuery. Everything seems to be working fine, except for a strange delay that occurs only the first time the complete callback is triggered - oddly enough, this is the only instance where it reaches the pr ...

javascriptjqueryanimation

javascript/jquery form validation problems/support needed (jQuery)

Long story short, I am facing an issue with my code and seeking some guidance. I have various functions to perform different checks. For this particular example, I have a form with a default value of "enter name here" for one field. Here is the HTML snipp ...

javascriptjquery

Tips for sending web form data straight to Google Sheets without the need for an authentication page

Exploring the Concept I have a unique idea to develop a landing page with a form that captures visitors' email addresses in a Google Sheet. After discovering a helpful post containing a Google App script for this purpose, I followed the guidelines o ...

javascriptjqueryajaxgoogle-apps-scriptcors

Dynamic Select Box with Display of 2 Buttons

Looking to create an Ajax combo box with options for Female and Male. I would like to display a button for Female and a button for Male. Here is the code that I have: <!DOCTYPE html> <html> <head> <style> #for-male, #for-female{ ...

javascriptjqueryajaxcombobox

PHP function is not able to receive variables after an ajax request

In the process of developing a search function, I created a method that retrieves data from a database, stores each advertisement in a variable, and saves pagination information in another variable. This allows the data to be returned as an array for later ...

phpjqueryajax

Creating a layout with two divs displayed next to each other using CSS

Just when I thought I had it figured out, my two side-by-side divs are not behaving as intended inside the parent div. Why is the orange "Content" div ending up below the navigation bar? Can anyone spot what I did wrong here? Thank you in advance! CSS: ...

css