Utilizing Jquery to pass two classes along

I am looking for assistance on how to pass multiple classes within if-else statements and jQuery. My goal is to have both divs and divs2 change when the next button is clicked.

Can someone please provide guidance on achieving this?

--code not mine--

$(document).ready(function() {
      $(".divs div").each(function(e) {
        if (e != 0)
          $(this).hide();
      });

      $("#next").click(function() {
        if ($(".divs div:visible").next().length != 0)
          $(".divs div:visible").next().show().prev().hide();
        else {
          $(".divs div:visible").hide();
          $(".divs div:first").show();
        }
        return false;
      });

      $("#prev").click(function() {
        if ($(".divs div:visible").prev().length != 0)
          $(".divs div:visible").prev().show().next().hide();
        else {
          $(".divs div:visible").hide();
          $(".divs div:last").show();
        }
        return false;
      });
   });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs">
  <div class="cls1">1</div>
  <div class="cls2">2</div>
  <div class="cls3">3</div>
</div>

<a id="prev">prev</a>
<a id="next">next</a>

<div class="divs2">
  <div class="cls1">1</div>
  <div class="cls2">2</div>
  <div class="cls3">3</div>
</div>

javascripthtmljquerycss

Answer №1

Enhance your webpage with the following jQuery code:

$(document).ready(function() {
      $(".tabs div").each(function(index) {
        if (index !== 0)
          $(this).hide();
      });
      
      $(".tabs2 div").each(function(index) {
        if (index !== 0)
          $(this).hide();
      });

      $("#next").click(function() {
        if ($(".tabs div:visible, .tabs2 div:visible").next().length !== 0)
          $(".tabs div:visible, .tabs2 div:visible").next().show().prev().hide();
        else {
          $(".tabs div:visible, .tabs2 div:visible").hide();
          $(".tabs div:first, .tabs2 div:first").show();
        }
        return false;
      });

      $("#prev").click(function() {
        if ($(".tabs div:visible, .tabs2 div:visible").prev().length !== 0)
          $(".tabs div:visible, .tabs2 div:visible").prev().show().next().hide();
        else {
          $(".tabs div:visible, .tabs2 div:visible").hide();
          $(".tabs div:last, .tabs2 div:last").show();
        }
        return false;
      });
   });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
  <div class="content1">Content 1</div>
  <div class="content2">Content 2</div>
  <div class="content3">Content 3</div>
</div>

<a id="prev">Previous</a>
<a id="next">Next</a>

<div class="tabs2">
  <div class="content1">Content 1</div>
  <div class="content2">Content 2</div>
  <div class="content3">Content 3</div>
</div>

Answer №2

$(document).ready(function() {
    
      $(".divs div").each(function(e) {
        if (e%3 != 0)
          $(this).hide();
      });

      $("#next").click(function() {
        if ($(".divs div:visible").next().length != 0)
          $(".divs div:visible").next().show().prev().hide();
        else {
          $(".divs div:visible").hide();
          $(".divs div.cls1").show();
        }
        return false;
      });

      $("#prev").click(function() {
        if ($(".divs div:visible").prev().length != 0)
          $(".divs div:visible").prev().show().next().hide();
        else {
          $(".divs div:visible").hide();
          $(".divs div.cls3").show();
        }
        return false;
      });
   });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>two-class</title>
</head>
<body>
   
<div class="divs">
  <div class="cls1">1</div>
  <div class="cls2">2</div>
  <div class="cls3">3</div>
</div>

<a id="prev">prev</a>
<a id="next">next</a>

<div class="divs">
  <div class="cls1">1</div>
  <div class="cls2">2</div>
  <div class="cls3">3</div>
</div>
    
<script src="jquery-3.5.1.js"></script>    
<script src="myscript.js"></script>
</body>
</html>

There is no need to utilize "two different" classes. Below is a code snippet that alters the class of the second div to "divs". Remember to adjust your script accordingly in the third line by using "e%3 != 0" instead of "e != 0" as shown in the example.

This approach works effectively when each "divs" class contains three "sub-div" elements. If you have four, simply replace "e%3 != 0" with "e%4 != 0".

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

Is it possible to simultaneously wait for the completion of two methods instead of awaiting each one individually?

When dealing with 2 async methods, one may want to run them simultaneously but wait for both to finish before proceeding. Here is an example: exports.get = async id => { const part1 = await context.get(id); const part2 = await context.get2(id ...

javascriptnode.js

Create a visual representation using a push button

Hey there, I'm attempting to create an image using a button on canvas. However, I'm facing an issue where I can't draw on the clear canvas. Here's my code: <!doctype html> <html> <head> <meta charset="utf-8"> ...

javascripthtmlbuttoncanvasdrawimage

Guide to linking two input fields using a single datepicker

To achieve the goal of filling two input fields simultaneously, take a look at the following code snippet: <mat-form-field> <input matInput [matDatepicker]="startDate" formControlName="SaleDate" /> ...

htmlangulardatepicker

Iteratively modify each essential attribute of a JSON object

In my data set, I have moisture levels recorded at various timestamps in a JSON object: { "values": { "21-Aug-2020 20:28:06:611591": "58.59", "21-Aug-2020 20:28:09:615714": "71.42", "21-A ...

javascriptnode.jsjson

Scroll to the top on every Angular 5 route change

Currently, I am utilizing Angular 5 for my project. Within the dashboard interface, there are various sections with varying amounts of content. Some sections contain only a small amount of information, while others have large amounts of content. However, w ...

javascriptangulartypescriptscrolltopangular-router

Is there a way to adjust my input value to correspond to December of 2022?

I am working on a project where I need to set a default month and year that the user cannot modify. They should only be able to change the date in December months. Any tips on how I can achieve this? <input id="input_date" type="date&qu ...

htmlcss

Optical imaging-guided Page Division

Looking for guidance on implementing a program that can perform "Vision-based Page Segmentation" with practical information rather than just theoretical knowledge. I prefer using JS (jQuery) and PHP for this project. After reading the article on VIPS: a ...

phpjqueryhtmlalgorithmimage-segmentation

What are the distinctions between manually and programmatically changing URLs in Angular 6?

My query pertains to differentiating navigation methods, specifically between clicking a button with [routerLink] and manually entering a URL in the browser's search bar. Update: I have a fixed menu on a certain page that appears as follows: <ul& ...

javascriptangular

Cannot access pseudo elements in the Microsoft Edge browser

Is there a workaround for not being able to select or access the properties of :before & :after elements on Microsoft Edge's inspect element? .arrow_box { position: relative; background: #d43959; border: 4px solid #ac1f3c; width ...

htmlcssmicrosoft-edgepseudo-element

The functionality to deselect multiple options in a select box is not functioning properly

There seems to be an issue with removing the selected attribute from the selected values in a jQuery multiselect box. The console is not showing any errors. You can view a working example here The problem lies in this code snippet: $("#mltyslct option ...

javascriptjqueryhtmlmulti-select

"The Vue.js/JavaScript object updates, but the changes are not being displayed in the document object model (DOM

Currently, I am endeavoring to iterate through an array of objects and display them as list items. There is a click listener that introduces a custom property to the object, and a class binding depends on the value of that property. Would you mind reviewin ...

javascriptvue.jsvuejs2

Element not found: {"method":"xpath","selector":"//*[@id='content container']

The error is occurring despite having the correct xpath in the code: Unable to locate element: {"method":"xpath","selector":"//*[@id='content column']... It seems like there might be multiple xpaths in the field. Here is the code snippet: dr ...

javahtmlxpathselenium-webdrivercss-selectors

Moving an image between different routes using a query

enter image description here I am currently working on a project where I need to take an image input file from the user and display it in another route. To achieve this, I am using query parameters. Issue: However, despite my efforts, the image is not bei ...

javascriptimagenext.js

Troubleshooting Problem with Uploading Multiple Files to Server Using PHP, MySQL, and

Recently, I completed building a simple website for uploading files to the server and storing their names in a database for search functionality. The site was created following a tutorial available at www.formget.com. However, I encountered an issue when ...

phpjquerymysqliupload

Developing an intricate nesting structure for an object

this is my code snippet: "book" => {b:{o:{o:k:{'end':true} could someone please provide an explanation or a helpful link for this? const ENDS_HERE = '__ENDS_HERE' class Trie { constructor() { this.node = {}; } insert(w ...

javascriptpythonobjecthashtable

Struggling to synchronize animation timing between elements using jquery

When you navigate to an album (for example, Nature because I'm still working on the others) and select one of the images, they all gradually fade out while the selected image appears on the screen. What's actually happening is that the selected i ...

javascriptjqueryhtmlcss

Trouble accessing onclick function

My dataSend AJAX function is not being called when I use the onclick event. I have checked in the Inspector of my browser and confirmed that the click handler is attached to it. However, when I set a breakpoint in the function using the Debugger, it never ...

javascriptphphtmlajax

Troubleshooting a Scrolling Problem in AngularJS页面

My web page design incorporates a header, content body, and footer using Responsive and Angular Material. Within the Content Body, there is an md-content element containing multiple text paragraphs enclosed in <p>. I have set the overflow to auto (ov ...

htmlcssangularjsscrollbar

I noticed that the node_modules folder has mysteriously vanished from my

When I tried running npm install in the terminal of VS Code. PS D:\work\backEnd> npm install npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an older version of npm, npm WARN old lockfile so ...

javascriptnode.jsnpmbackend

Tips for updating the color of table data when the value exceeds 0

I'm currently working on developing a transaction table that is intended to display debit values in red and credit values in green. However, I would like these colors to only be applied if the value in the table data is greater than 0 via JavaScript. ...

javascripthtmlcss