What is preventing me from toggling classes?

Question

What is preventing me from toggling classes?

Managing a compact to-do list where you have the ability to add new tasks and when clicking on an item, it should toggle between two classes while removing one.

<ul id="myUL" class="todoList">
    <li class='todoList card border-primary'>my li</li>
</ul>

This snippet shows the JavaScript code responsible for toggling classes:

$( "#myUL" ).children().on("click",function() {  
    $( this ).toggleClass( "checked" );
    $( this ).toggleClass( "border-primary" );
    $( this ).toggleClass( "border-success" );                                                                              
});

The script is included after bootstrap.min and jquery-3.3.1.min files as they are dependencies for Bootstrap components.

However, there seems to be an issue with the code only functioning on the first element. How can this be resolved?

javascript jquery css twitter-bootstrap

Answer 1

Answer №1

This JavaScript code will only apply to the first element because it attaches eventlisteners just once. To make it work for multiple elements, you can add a listener to the parent and handle events from there. Another option is to remove all eventlisteners from each list item and then re-add them with the current code, although this is not considered best practice.

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

Source: https://www.w3schools.com/howto/howto_js_todolist.asp

Answer 2

This JavaScript code will only apply to the first element because it attaches eventlisteners just once. To make it work for multiple elements, you can add a listener to the parent and handle events from there. Another option is to remove all eventlisteners from each list item and then re-add them with the current code, although this is not considered best practice.

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

Source: https://www.w3schools.com/howto/howto_js_todolist.asp

Answer 3

Answer №2

Why don't you give this approach a shot?

$("#myUL li").click(function() {  
                   $(this).toggleClass("checked");
                   $(this).toggleClass("border-primary");
                   $(this).toggleClass("border-success");

  });

Answer 4

Why don't you give this approach a shot?

$("#myUL li").click(function() {  
                   $(this).toggleClass("checked");
                   $(this).toggleClass("border-primary");
                   $(this).toggleClass("border-success");

  });

What is preventing me from toggling classes?

Answer №1

Answer №2

Similar questions

Troubleshooting Unresolved Issues with MongoDB and Node.js Promises

Tips for resolving the cross-origin resource sharing (CORS) origin error in Jquery when encountering issues with the

Is there a way to modify the badge class color in Bootstrap 4 using CSS?

What is the best approach for utilizing AJAX to load content into a Lightbox based on the user's selected trigger?

Tips for personalizing the NavigatorIOS's right side

What steps can be taken to troubleshoot an AJAX error that does not display any error messages?

What is the process for inserting text into a Word document using the Google Docs API?

Retrieve the Response object when an ASP.NET Button is clicked

Optimal approach for customizing the appearance of child components based on the parent component

Using JavaScript to open a document file in Chrome at launch

Managing error responses while fetching a blob through AJAX

Troubleshooting a jQuery filter function selector issue

Obtain the unique identifiers for each element within an array and attach them to the option values for each item

Enhance your Facebook sharing by including unique element IDs as hashes in PHP code

Margins are added to cards on the right side

Transform a protractor screenshot into a PDF file

Can the value of ng-model be altered without using ng-change function?

Error: JSON data couldn't be processed due to an unexpected end, resulting in a SyntaxError at JSON.parse()

What is the best way to modify a current state object without causing an endless loop of redirects?

What is the best way to position two out of the three link tags to the right side?