Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div.

Here is the code snippet:

for (var i = 0; i < myObjectString.length; i++) {
var obj = JSON.parse(myObjectString);
document.getElementById("endorsment").innerHTML += "<div id='endor'>\n\
        <div class='endo_"+ obj.Endorsment[i].lang + "' id='endo'>\n\
        <div id='count'>"+ obj.Endorsment[i].ln + "</div>\n\
        <div id='proglang'>"+ obj.Endorsment[i].lang +"</div>\n\
        </div>\n\
        <div class='contenthover_"+ obj.Endorsment[i].lang +"' id='contenthover'>\n\
        <a class='delete'>\n\
        <img src='http://icons.iconarchive.com/icons/icojam/blue-bits/16/symbol-delete-icon.png' />\n\
        </a>\n\
        <span class='devider'>-</span>\n\
        <a class='mybutton'>\n\
        <img src='http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/16/comment-icon.png' />\n\
        </a>\n\
        <span class='devider'>-</span>\n\
        <a class='mybutton'>\n\
        <img src='http://icons.iconarchive.com/icons/icojam/blue-bits/16/information-icon.png' />\n\
        </a>\n\
      </div>\n\
    </div>";

    $('.endo_'+ obj.Endorsment[i].lang).click(function () {

    //$('#contenthover').toggle();
    alert(obj.Endorsment[i].lang);
});

For more details, please refer to this LINK. Can anyone assist me with this?

Answer №1

Instead of placing your click code inside the for loop, consider using pseudo query selectors which will streamline your work.

Utilize pseudo query selectors to simplify your code.

$("[class*='endo']").click(function () {    
    //perform actions here.
    $(this).next().toggle();   
});

The next() selector targets the next sibling in the DOM. By creating a wrapper class, you can enhance your CSS styling. Refer to the provided fiddle for a better grasp.

If you eliminate the wrapper class, you may encounter display issues with "contenthover".

Check out your updated fiddle here.

http://jsfiddle.net/xK0nB1n/2jaLg60o/11/

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

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

I'm utilizing a getServerSideProps function on the directory page. pages/catalog/index.js export async function getServerSideProps(ctx) { const response = await fetch( `http://someDomen.com/api/ipro/catalog?${ctx?.query?.page ? `page=${ctx.quer ...

Modifying the information depending on the option chosen from the dropdown menu using angularJS

I have a dropdown menu where I can choose between two options, and when selected, the corresponding data is displayed. However, I would like to display the data that is inside a div tag instead. Check out this Fiddle Demo HTML: <div ng-controller="Ct ...

In Firefox, the CSS height and width values are displayed as X pixels, whereas in Internet Explorer, they are automatically set to 'auto'

When it comes to measuring div box dimensions, jQuery can be a handy tool. Here is an example code snippet: $(document).ready(function(){ var h = $("#testbox").css("height"); }); Interestingly, the same code can give different results in different brow ...

Modify the ColVis Appearance in Datatable Using JavaScript

Where can I modify the background color for the 'Hide/Show columns' label in the ColVis.js file? ...

Disappearance of icon upon hovering in CSS

I am currently working with Angular JS (1.x) and I have a requirement to display tooltip text when hovering over an info icon. The tooltip text appears properly, but the issue is that the icon disappears when hovered over. It reappears once the hover is re ...

Implementing jQuery in ASP.NET code-behind files

I am new to asp.net and trying to learn by experimenting with rendering aspx in only specific parts. I was able to make it work, but encountered an issue when trying to create a button, textbox, and label where the label would display the text from the tex ...

Error in Node.js: Unable to access properties of null value within Express

While using Express (with node.js) and MongoDB, I encountered an error when trying to view or update a user profile. The middleware token check worked fine getProfileFields:::::::::::::>>>>e: TypeError: Cannot read properties of null (rea ...

Updating an HTML Table with AJAX Technology

I'm struggling to figure out how to refresh an HTML table using AJAX. Since I'm not the website developer, I don't have access to the server-side information. I've been unable to find a way to reload the table on this specific page: I ...

How to make a node_module global with the power of Webpack 2

I'm currently utilizing a package in an Angular project that can be found at the following link: https://github.com/pablojim/highcharts-ng One of the requirements for this package is that highcharts needs to be included as a global dependency by add ...

Why is the Zip archive downloader not functioning properly when using Node.js and Archiver (Unexpected end of archive error)?

Looking to download multiple files using archiver with express. The server should respond to a post request from the client by sending a .zip file. However, there seems to be an issue where WinRAR displays an error message "! 98I9ZOCR.zip:Unexpected end of ...

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

Out of the DIVs floating left and right, which one is positioned first?

Is the order of <div> elements in HTML important? If it is, what is the reason behind it? .float-left{float:left;} .float-right{float:right;} <div> <div class="float-left">Left</div> <div class="float-right">Right</ ...

Should CSS variables be defined within the render method of a React component?

Yesterday, I mistakenly created and deleted a post. Now, I am facing an issue with creating a component that requires specific styling. The problem arises when the componentDidMount() method causes flickering during the rendering process, as it takes some ...

Utilizing Navigate and useState for Conditional Routing in React

Looking for assistance with a React app. Here's the code snippet: function App() { const [walletConnected, setWalletConnected] = useState("") async function checkConnection() { const accounts = await window.ethereum.request({ method: 'e ...

Iterate through the entire array without including a specific item

I am struggling with looping through an array of items and applying some code to each item while excluding one specific item (the clicked-on item). I have experimented with using splice, but that method ends up removing the array item completely, whereas I ...

What is the best way to determine the value of a variable specific to my scenario?

Using the Angular framework, I am trying to determine if the data variable updates when a button is clicked. Here is an example: <button ng-click='change()'>{{data}}</button> I want to verify if the data changes or log the data var ...

HTML5 Applications with Intel XDK

I'm currently working on an HTML5 application using Intel's XDK platform for building in Android. However, I'm facing an issue where the application crashes when the keyboard pops up upon entering text. Can anyone provide assistance with thi ...

Ways to move to the next line following the navigation bar text

Below is the code snippet that I am working with: <nav class="navbar navbar-expand-sm navbar-dark "> <div class="container-fluid"> <a class="navbar-brand" href="#">LOREM IPSUM</a&g ...

Display Error with Custom Alert Box

I recently implemented a customized alert box from slayeroffice's website, which you can find at slayeroffice.com/code/custom_alert/. When I view it on my browser, the alert box appears with a blue color in the center of the screen. Here is how it lo ...

Use the "webkit-keyframes" exclusively within the specified id

Is there a way to exclusively apply the "webkit-keyframes" within the #progress1 id? I have another progress bar (#progress2) on the same page with a different webkit-keyframes, which is why I need this distinction. #progress1 { background: white; / ...