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

Remove the color gradient for the column headers in the Google Visualization table

Whenever I attempt to change the colors of the column headers using the method demonstrated in this insightful source, a rather generic gradient is applied. Interestingly, the example code provided also demonstrates the same default gradient on the secon ...

cssgoogle-apps-scriptgoogle-visualization

Implementing CSS in Laravel 8

After placing my CSS file in the public/css folder, I included it in the head section with the following code. <link href="{{ url('/css/app.css') }}" rel="stylesheet"> Unfortunately, the CSS styles are not being applied ...

csslaravel-8

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

How can I pass a value to an anchor tag on every click using jQuery? I am encountering an issue with my current code where the value is not being retrieved when I click the button. //HTML snippet <button id="a-selectNm" data-a_name="<?php echo $row[ ...

javascriptphpjqueryhtml

Deactivate a function when the dropdown input is selected

I'm currently using a function to attach scroll events to a slider element for navigating through slides. However, I want to temporarily disable this function in specific situations - such as when a dropdown is in focus - to allow smooth scrolling thr ...

javascriptjqueryfunctionscrolldisable

Tips for maintaining pagination state in datatable when making ajax calls

Summary of my question How can I keep the datatable on the same page after updating a row using ajax in my unique way? Challenges I'm facing When a user clicks a button in the table to update a specific row and I call the fn_GetData() function. Af ...

javascriptjqueryhtmldatatables

Looking to integrate the date, month, and year selection tags into the inline format

The Edit User Profile page includes a Birthday field, which is currently displayed vertically. I am looking to change the layout so that the Birthday field appears horizontally. Here is the code I am using: Within visitors/edit.html.erb, <%= simple_f ...

javascripthtmlcssruby-on-rails-4datepicker

Node.js is struggling to parse JSON data, resulting in undefined values appearing in the console

Issue with parsing JSON data in a node.js environment resulting in 'undefined' display in console. Below is the HTML code snippet: var jsonObjects = [{id:1, name:"amit"}]; jQuery.ajax({ url: 'http://localhost:8081', type: ...

jsonnode.jsjqueryhttp-headers

Issue with Datatables when using less than 6 columns

Currently, I have been utilizing the Datatables plugin in my Laravel 5.2 project. The table is populated using jQuery and Ajax post methods. This represents the structure of my HTML table: <table id="entidadeTable" class="table"> <thead> ...

jqueryajaxlaraveldatatables

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above. Here is my implementation. Please review my JSFiddle. HTML: <table border="0" id="cssTable"> <tr> <td>eredgb</td> <td><a href="self">0 ...

htmlcss

Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...

javascriptjquerycss

What is the best way to utilize jquery autocomplete for searching values?

I've noticed that the autocomplete feature is working fine, but when I click on one of the suggested values in the drop-down list, it just gets added to the search box. I then have to manually hit enter to perform the actual search. Is there a way to ...

jqueryautocomplete

Next.js fails to update the user interface (UI) when there is a change in

In my latest Next.js project, I am working on a feature that involves looping through an array of amenities. Each amenity is displayed in a div element that, when clicked, toggles the active property. The logic behind this functionality is handled by the ...

cssnext.jstoggleuse-statereact-state-management

The comparison between the index of an array of structures and NULL is not resulting in a true condition

Having an array of Structs that I passed to a function, I checked an index of the array to ensure it was NULL, as expected. However, comparing it to NULL did not yield a true result. This is where I defined the struct and initialized the array: typedef s ...

carraysif-statementstructnull

Issue with CSS for Pagination and Content Display

When I print an HTML page, I want to include custom text in the header of all printed pages. @page { margin-top:5mm; margin-bottom: 25mm; margin-left: 30mm; margin-right: 30mm; @top-right{ content: "Page title"; /* Page title ...

htmlcsscss-paged-media

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

htmlcss

Use Django, Ajax, and Jquery to incrementally add items to a "cart" by selecting checkboxes one by one

Despite adding new code, it's still not working as expected... I've been attempting to implement a feature where users can select items using checkboxes and add them to the "cart" displayed at the top of the page. Each item on the page has a che ...

javascriptjqueryajaxdjango

Sending a jQuery variable to a static image source within a Django template

I have a Django view that returns a list of file names (which are .jpg images) as an Ajax response. My goal is to append each image to a div with the id grid. Here's my code: success: function(response) { var state = response.state; var piclist = ...

jquerydjangoajax

How can one use an ajax call to delete rows from a table and then add new rows in their

Hey everyone, I'm looking to make an AJAX call and when it's successful, I want to remove all existing elements in my table and replace them with new ones based on the returned data. This is the method I have for making the AJAX call: $(document ...

ajaxjsonjspjquery

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

htmlcsswebfrontend

Can an iFrame be programmed to automatically scroll?

Here's an example of autoscroll: I am looking to implement autoscroll for the content within an iframe that has a width wider than the browser window. Can this be achieved using jQuery? ...

jqueryiframeautoscroll