Updating class on elements in arrays

There are multiple elements, each with a unique ID "xxx_view_ch_&&&" within an outer div with the ID "xxx_view_&&&". The goal is to change the class of the element with the ID "xxx_view_ch_&&&" when the user clicks on the entire element ("xxx_view_&&&").

The current code used is as follows:

$(document).ready(function(){

  $('#reci_view_01').click(function(){
   $('#reci_view_ch_01').toggleClass('not_active header');   });

  $('#reci_view_02').click(function(){
   $('#reci_view_ch_02').toggleClass('not_active header');   });
   
  $('#reci_view_03').click(function(){
   $('#reci_view_ch_03').toggleClass('not_active header');   });
   
  $('#reci_view_04').click(function(){
   $('#reci_view_ch_04').toggleClass('not_active header');   });
   
  $('#reci_view_05').click(function(){
   $('#reci_view_ch_05').toggleClass('not_active header');   });

});
.not_active {
  text-decoration: line-through !important;
  color: darkgray;
  font-weight: bold;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">

    <div class="ui list">
      <a id="reci_view_01" class="item">
        <i class="remove circle outline icon"> </i>
        <div class="content">
          <div id="reci_view_ch_01" class="header">Test 1</div>
        </div>
      </a>
      <a id="reci_view_02" class="item">
        <i class="remove circle outline icon"> </i>
        <div class="content">
          <div id="reci_view_ch_02" class="header">Test 2</div>
        </div>
      </a>
      <a id="reci_view_03" class="item">
        <i class="remove circle outline icon"> </i>
        <div class="content">
          <div id="reci_view_ch_03" class="header">Test 3</div>
        </div>
      </a>
      <a id="reci_view_04" class="item">
        <i class="remove circle outline icon"></i>
        <div class="content">
          <div id="reci_view_ch_04" class="header">Test 4</div>
        </div>
      </a>
      <a id="reci_view_05" class="item">
      <i class="remove circle outline icon"></i>
        <div class="content">
          <div id="reci_view_ch_05" class="header">Test 5</div>
        </div>
      </a>
    </div>

A task list needs to be created where users can select items to add to another list. Exploring the possibility of utilizing arrays for this functionality as JavaScript knowledge is limited.

Answer №1

To achieve this, you can utilize common classes to link the events to all the elements with the class name .item. By doing so, you can employ DOM traversal methods like find() to locate the necessary child element.

For this scenario, I introduced two new classes: reci_view and reci_view_ch:

$('.reci_view').click(function() {
  $(this).find('.reci_view_ch').toggleClass('not_active header');
});
.not_active {
  text-decoration: line-through !important;
  color: darkgray;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">

<div class="ui list">
  <a id="reci_view_01" class="item reci_view">
    <i class="remove circle outline icon"> </i>
    <div class="content">
      <div id="reci_view_ch_01" class="header reci_view_ch">Test 1</div>
    </div>
  </a>
  <a id="reci_view_02" class="item reci_view">
    <i class="remove circle outline icon"> </i>
    <div class="content">
      <div id="reci_view_ch_02" class="header reci_view_ch">Test 2</div>
    </div>
  </a>
  <a id="reci_view_03" class="item reci_view">
    <i class="remove circle outline icon"> </i>
    <div class="content">
      <div id="reci_view_ch_03" class="header reci_view_ch">Test 3</div>
    </div>
  </a>
  <a id="reci_view_04" class="item reci_view">
    <i class="remove circle outline icon"></i>
    <div class="content">
      <div id="reci_view_ch_04" class="header reci_view_ch">Test 4</div>
    </div>
  </a>
  <a id="reci_view_05" class="item reci_view">
    <i class="remove circle outline icon"></i>
    <div class="content">
      <div id="reci_view_ch_05" class="header reci_view_ch">Test 5</div>
    </div>
  </a>
</div>

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

How does AngularJS watcher behave when a callback is triggered during a reload or router change?

Can anyone explain why the watch callback is triggered upon browser reload or Angular route change even when the old value and new value are the same? Here's an example: $scope.test = "blah"; $scope.watch("test", function(new, old){ console.log(ne ...

Divide a cell table into multiple rows without distorting the table format

I am currently working on creating a screen layout that includes multiple rows and a column within a single cell. However, I'm facing issues with maintaining the formatting of my other table components. Although I have made some progress, whenever I ...

Disappearing text editor content in React Js

I have created a basic accordion feature with a text editor inside each accordion. Accordion.js <div className="wrapper"> {accordionData.map((item, index) => ( <Accordion> <Heading> <div styl ...

Executing numerous SQL queries across various arrays

Hello, I am a PHP beginner and I could use some assistance. I have dabbled in PHP before but often get busy with new projects just when I start to understand it. Currently, I am facing an issue with using multiple queries and arrays to retrieve data from t ...

Guide to integrating the (mqtt) JavaScript library into your Angular 2 TypeScript application

I followed a similar approach as demonstrated in how-to-use-moment-js-library-in-angular-2-typescript-app but encountered the error message error TS2307: Cannot find module 'mqtt'. npm install --save mqtt <s>typings install --save mqtt< ...

How can the label value be updated in a material ui slider component?

code snippet: https://codesandbox.io/s/runtime-worker-kxse3?file=/src/App.js Can anyone help me ensure that the labels in the bubble display the same values as the text (3, 5, 7, 10)? ...

The Discord.js bot is unable to send messages in embedded format

I created a Discord bot using discord.js with multiple commands, including three commands with embed forms. One command, "help", works perfectly fine, but the other two are not functioning properly. All of them have the same main code structure, specifical ...

Creating a custom decision tree in Angular/JS/TypeScript: A step-by-step guide

My current project involves designing a user interface that enables users to develop a decision tree through drag-and-drop functionality. I am considering utilizing GoJS, as showcased in this sample: GoJS IVR Tree. However, I am facing challenges in figuri ...

When making a second call to .html() in JQuery, any previous calls to .css(), delay(), or fadeIn() will be ignored

Question for the Experts: Recently, I have been exploring Ajax functionality to send form data to an MVC3 controller and retrieve Json response. Upon successful submission, my goal is to: Capture the initial content of the form div using .html() Replac ...

Eliminate table borders in a data grid using bslib and Bootstrap design

Within my shiny app, I am implementing the yeti theme using the bslib library along with a datatable that features bootstrap styling. However, I have encountered an issue where unwanted white cell borders are appearing in the datatable when compared to uti ...

Adding a Timepicker to a Datepicker on a jsp webpage with javascript

I am working on a JSP page that includes a date picker. I want to enhance this datepicker by adding a start time and end time within the calendar itself. How can I achieve this? Additionally, I need to implement validation ensuring that the start time is a ...

A space has been included before the CSS tag in the document for docx4j/Js

I am looking for a way to convert an HTML formatted string into a docx file. Currently, I am using Jsoup to clean up the HTML and then docx4j to parse the XHTML into a docx format. However, I encountered an issue with colors since they are not supported b ...

Having trouble transmitting information from the view to the controller in Asp.net MVC with Jquery

I've been struggling to send data from my View to the controller because it always shows a count of 0. The request carries the data according to the developer console, but the action method fails to receive it. I'm at a loss in identifying the pr ...

What is the implementation of ForEach within map in JavaScript?

I am working with a sample JSON in the following format: var sample=[{"id":200,"children":[{"value":300,"type":"SINGLE"},{"value":400,"type":"CLASSIC"},{"value":600,"type":"DUAL"}]},{"id":300,"children":[{"value":500,"type":"TRIO"},{"value":600,"t ...

Clearing out Socket.io session data using timers

I have been considering enhancing the functionality of my node.js server using Socket.io to facilitate communication between a client (iOS app) and the server, with the goal of maintaining persistent session data throughout connections. Upon initial conne ...

Tips for transferring variables from XS JavaScript to an ABAP function

I am tasked with converting ABAP to xs Javascript using an ODATA service. The POST request will have a body.data object containing headers and an array of objects in the following format: { "IvCompCode":"1710", "IvDocType":"NB", "IvPurchOrg":"171 ...

Tips for keeping your chosen CSS style sheet consistent when moving around the site

I am currently in the process of creating my first website. I have successfully added two buttons that allow users to switch between a light theme and dark theme, with the light theme being the default. However, I am encountering an issue that I cannot see ...

The jquery cookie plugin appears to be failing to delete cookies

I included jquery cookie plugin from . However, when attempting to remove the cookie, I encountered the following: $.cookie() Object {IntApp_prpl1115: "soapB9ACC84D2F8F9F15B110049BBA948D37&iwk OVEoOoMWr….161:8081/nexus/index.html&projects.proj ...

Which is the better choice: AngularJS or ExtJS?

I am exploring the idea of creating a web application that offers analysis services. My plan is to develop the back-end using either PHP or JavaEE that can support RESTful API. As for the front-end, I am looking for a lightweight framework that is easy t ...

Error: The property 'slice' cannot be read from an undefined value

I am currently working on a prototype recipe app called Forkify, which is being developed using Javascript, NPM, Babel, and Webpack. In this project, I am utilizing a custom API. API URL : forkify-api.herokuapp.com TO SEARCH RESULT This API returns a l ...