Numerous titles being showcased

I need to enhance the functionality of clicking on multiple objects in order to display all titles at once within the header.

Currently, only one title is shown each time an object is clicked.

Therefore, when clicking on items 1, 2, and 3, I expect to see all respective titles displayed simultaneously.

$("document").ready(function() {
  $(".ui-widget-content").on("click", function() {
    $("#select-result").text($(this).attr('text'));
  });
});
#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}

#selectable li {
  margin: 10px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

.wrapper {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
  <div>
    <p id="feedback">
      <span>You've selected:</span> <span id="select-result">none</span>.
    </p>
    <ol id="selectable">
      <li class="ui-widget-content" text="car">1</li>
      <li class="ui-widget-content" text="truck">2</li>
      <li class="ui-widget-content" text="physics">3</li>
      <li class="ui-widget-content" text="maths">4</li>
      <li class="ui-widget-content" text="home automation">5</li>
      <li class="ui-widget-content" text="car6">6</li>
      <li class="ui-widget-content" text="car7">7</li>
      <li class="ui-widget-content" text="car8">8</li>
      <li class="ui-widget-content" text="car9">9</li>
      <li class="ui-widget-content" text="car10">10</li>
      <li class="ui-widget-content" text="car11">11</li>
      <li class="ui-widget-content" text="car12">12</li>
    </ol>
  </div>
</div>

javascripthtmlcss

Answer №1

When using a class similar to this example - it is important to note that the attribute has been updated to a proper data-attribute.

$("document").ready(function() {
  $(".ui-widget-content").on("click", function() {
    $(this).toggleClass("ui-selected"); // toggle on or off
    const selected = $(".ui-selected").map(function() { // find all selected
      return $(this).data("text")
    }).get();  // convert to text array
    // set to joined array or none if nothing selected
    $("#select-result").text(selected.length === 0 ? "none" : selected.join(", "));
  });
});


$("document").ready(function() {
  $(".ui-widget-content").on("click", function() {
    $(this).toggleClass("ui-selected");
    const selected = $(".ui-selected").map(function() {
      return $(this).data("text")
    }).get();
    $("#select-result").text(selected.length === 0 ? "none" : selected.join(", "));
  });
});
#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}

#selectable li {
  margin: 10px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

.wrapper {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
  <div>
    <p id="feedback">
      <span>You've selected:</span> <span id="select-result">none</span>.
    </p>
    <ol id="selectable">
      <li class="ui-widget-content" data-text="car">1</li>
      <li class="ui-widget-content" data-text="truck">2</li>
      <li class="ui-widget-content" data-text="physics">3</li>
      <li class="ui-widget-content" data-text="maths">4</li>
      <li class="ui-widget-content" data-text="home automation">5</li>
      <li class="ui-widget-content" data-text="car6">6</li>
      <li class="ui-widget-content" data-text="car7">7</li>
      <li class="ui-widget-content" data-text="car8">8</li>
      <li class="ui-widget-content" data-text="car9">9</li>
      <li class="ui-widget-content" data-text="car10">10</li>
      <li class="ui-widget-content" data-text="car11">11</li>
      <li class="ui-widget-content" data-text="car12">12</li>
    </ol>
  </div>
</div>

Answer №2

If you want to handle the event using an array, simply assign an activation class and then dynamically manage the insertion and removal process.

let selectedItems = [];
$("document").ready(function() {
    $(".ui-widget-content").on("click", function() {
        if($(this).hasClass('ui-selecting')){
            $(this).removeClass('ui-selecting');
            removeItem(selectedItems, $(this).attr('text'));
        }else{
            $(this).addClass('ui-selecting');
            selectedItems.push($(this).attr('text'))
        }
        $("#select-result").text(selectedItems.length === 0 ? "none" : selectedItems.join(", "));
    });
  
    function removeItem(array, item){
        for(var i in array){
            if(array[i]==item){
                array.splice(i,1);
                break;
            }
        }
    }
});
#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}

#selectable li {
  margin: 10px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

.wrapper {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
  <div>
    <p id="feedback">
      <span>You've selected:</span> <span id="select-result">none</span>.
    </p>
    <ol id="selectable">
      <li class="ui-widget-content" text="car">1</li>
      <li class="ui-widget-content" text="truck">2</li>
      <li class="ui-widget-content" text="physics">3</li>
      <li class="ui-widget-content" text="maths">4</li>
      <li class="ui-widget-content" text="home automation">5</li>
      <li class="ui-widget-content" text="car6">6</li>
      <li class="ui-widget-content" text="car7">7</li>
      <li class="ui-widget-content" text="car8">8</li>
      <li class="ui-widget-content" text="car9">9</li>
      <li class="ui-widget-content" text="car10">10</li>
      <li class="ui-widget-content" text="car11">11</li>
      <li class="ui-widget-content" text="car12">12</li>
    </ol>
  </div>
</div>

Answer №3

Utilizing the append feature in jQuery allows for dynamic content addition 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #feedback {
      font-size: 1.4em;
    }
    
    #selectable .ui-selecting {
      background: #FECA40;
    }
    
    #selectable .ui-selected {
      background: #F39814;
      color: white;
    }
    
    #selectable {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 450px;
    }
    
    #selectable li {
      margin: 10px;
      padding: 1px;
      float: left;
      width: 100px;
      height: 80px;
      font-size: 4em;
      text-align: center;
    }
    
    .wrapper {
      display: flex;
      margin: auto;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div>
      <p id="feedback">
        <span>You have made a selection:</span> <span id="select-result"></span>.
      </p>
      <ol id="selectable">
        <li class="ui-widget-content" text="cat">1</li>
        <li class="ui-widget-content" text="dog">2</li>
        <li class="ui-widget-content" text="biology">3</li>
        <li class="ui-widget-content" text="chemistry">4</li>
        <li class="ui-widget-content" text="automation">5</li>
        <li class="ui-widget-content" text="car6">6</li>
          ...
        <li class="ui-widget-content" text="car12">12</li>
      </ol>
    </div>
  </div>
  <script>
    $("document").ready(function() {
      $(".ui-widget-content").on("click", function() {
        $("#select-result").append($(this).attr('text'));
      });
    });
  </script>
</body>

</html>

Answer №4

This solution should be perfect for your needs!

let selectedItems = [];
$("document").ready(function() {
  $(".ui-widget-content").on("click", function() {
    
    if(selectedItems.indexOf($(this).attr('text')) >= 0){
      selectedItems.splice(selectedItems.indexOf($(this).attr('text')), 1);
      $("#select-result").text(selectedItems.join(", "));
    }
    else{
      selectedItems.push($(this).attr('text'));
      $("#select-result").text(selectedItems.join(", "));
    }
    if(selectedItems.length < 1){
      $("#select-result").text("none");
    }
    
  });
});
#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}

#selectable li {
  margin: 10px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

.wrapper {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
  <div>
    <p id="feedback">
      <span>You've selected:</span> <span id="select-result">none</span>.
    </p>
    <ol id="selectable">
      <li class="ui-widget-content" text="car">1</li>
      <li class="ui-widget-content" text="truck">2</li>
      <li class="ui-widget-content" text="physics">3</li>
      <li class="ui-widget-content" text="maths">4</li>
      <li class="ui-widget-content" text="home automation">5</li>
      <li class="ui-widget-content" text="car6">6</li>
      <li class="ui-widget-content" text="car7">7</li>
      <li class="ui-widget-content" text="car8">8</li>
      <li class="ui-widget-content" text="car9">9</li>
      <li class="ui-widget-content" text="car10">10</li>
      <li class="ui-widget-content" text="car11">11</li>
      <li class="ui-widget-content" text="car12">12</li>
    </ol>
  </div>
</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

Extraction of properties from an object in an ES6 class

How should object destructuring be properly applied for methods within ES6 classes? user.ts import { Request, Response } from "express"; export class User { constructor (){ Object.assign(this,{ root:this.root, get:this.get ...

javascripttypescriptexpressecmascript-6

Combining MarkDown elements into a DIV or a custom HTML tag

I have utilized the Jeykll tool to convert mark down content into HTML. I am looking to group the following mark down elements within a div element or another custom HTML tag. Markdown #Multiple Axis {:.title} Different types of data can be vis ...

htmlmarkdownjekyll

The oninput event in IE10 is consistently triggered upon redirection

I have encountered a strange issue with IE10 when redirecting the page on an 'oninput' event, which does not occur with Chrome. I have simplified the code to demonstrate the problem: <html> <head> <script type="text/javascript&g ...

javascripthttp-redirectdom-eventsinternet-explorer-10

Navbar Dropdown Button in Bootstrap Not Functioning Properly

I've been utilizing Bootstrap to create a navigation bar, but the dropdown button is not functioning when clicked. What could be causing this issue? <!-- Website HEAD --> <head> <title> Celeb Live </title> <!-- Web ...

htmlbootstrap-5

Displaying a collection of nested objects in AngularRendering a group

Is there a way to render an object of objects in Angular without converting it into an array or similar structure? I have a large object of objects and I want to avoid multiple iterations through object-to-array conversions just to loop through the array i ...

javascriptangularobjectrenderngfor

Prevent running function bodies simultaneously based on user events in JavaScript until a previously triggered execution is completed

When a user clicks on a button in my component, the doSomething function is activated. The issue I am facing is that doSomething takes between 200-1100ms to finish execution and change state. What complicates matters is that when the button is clicked rapi ...

javascriptreactjsasync-await

Is there a way to incorporate a trace in Plotly while also arranging each data point along the x-axis in a unique custom order?

I am facing a challenge in creating a line graph that displays (x, y) coordinates where the x axis represents a date and the y axis represents a value. The dates are formatted like DD-MM-YYYY, for example, 15-04-2015. My initial trace is added with the fo ...

javascriptgraphplotly

Tips for arranging the items within the slider according to the specified direction (rtl, ltr) in the Owl Carousel slider for Angular

Is there a way to dynamically change the direction of the owl-carousel-o angular slider based on the selected language? Currently, I have set rtl: true in the owl-carousel configuration during initialization. However, when the user switches to a different ...

javascriptcssangularowl-carousel

Is it possible to conceal the :value within a datalist while still being able to send the value using the POST method?

I have developed an Editable combobox where users can "Search", "Select", or "Edit/Insert" new values. To achieve this functionality, I am utilizing Input and Datalist elements. If you want to see the implementation, you can check it out on jsfiddle: htt ...

htmlformsvue.js

When using Reactjs with leaflet-routing-machine, the waypoint is rendered twice

While attempting to use the leaflet-routing-machine library, I encountered a bug. The issue is that the "Waypoints" section is rendering twice. Why is this happening? Can anyone offer assistance? Thank you https://i.sstatic.net/MlkQ2.jpg My code is lis ...

javascriptreactjsreact-leafletleaflet-routing-machine

Stop the http requests in Angular as the user continually types in the autocomplete input field

Currently, I have an input field that utilizes a material autocomplete component. This component makes calls to the server for results as the user types. While it is working correctly for now with the server returning results in order, I am looking for a ...

javascriptangularrxjs

Tips for creating a hierarchical multilevel datatable with JavaScript

I am currently working on implementing a multi-level datatable without relying on any external plugins or libraries. My goal is to achieve this using pure JavaScript, JQuery, or AngularJS. I have explored the following resources: Traverse all the Nodes of ...

javascriptjqueryangularjsdatatableshierarchy

Encountering a JSLint error while attempting to import the 'aws-amplify' package in my main file

Recently, I installed the latest version of aws-amplify using npm. After running npm init with 'entryPoint.js' as the entrypoint file, I encountered an issue when pasting the following code at the top of entryPoint.js: import Amplify, {Auth} from ...

javascriptamazon-web-servicesnpmaws-amplifyjslint

React version 18.2.0 and Next.js version 13 faced an issue with hydration failure due to the initial user interface not matching. This problem

Upon opening the page, I encounter an error when focusing on the input element right away. However, if I wait a few seconds before focusing on the input element, the error does not occur. Unfortunately, I have been unable to resolve this issue. Interesting ...

javascriptreactjsnext.js

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

javascripthtmlcssangulartypescript

Failure to Trigger Error Callback in Ajax Requests

I am encountering an issue with the error callback not being called when I pass the error function as an object parameter in a function. Strangely, when I define it directly within the ajax code, it works without any problems. var options = new Object(); ...

javascriptjqueryajaxcallback

Obtain the date value in the format of month/day/year

How can I retrieve the date from 2 months ago and format it as MM/DD/YYYY? I tried this code snippet, but it's returning a value in the format "Tue Feb 11 14:30:42 EST 2014". var currentDate = new Date(); currentDate.setMonth(currentDate.getMonth() ...

javascriptjquery

Having trouble with jQuery toggle fade: Unable to make the div fade in/out when toggling

Is there a way to modify the functionality of my black button so that when clicked, the red div fades out while the blue div fades in? Right now, clicking the button switches between the two divs without any fading effect. Fiddle: http://jsfiddle.net/ddac ...

javascriptjquerycss

The setTimeout function fails to behave as intended when used in conjunction with synchronous ajax

Within my code, I have a function that is being invoked multiple times due to iterating through an array of length n and creating 'Plants' with synchronous ajax calls. These calls involve querying the Google Maps API, so it is crucial to throttle ...

javascriptjqueryajaxgoogle-maps

Building/Deleting the Vue Component using text search

In my App.vue file, I have the following setup: <template> <div id="app"> <input type="text" v-model="term"> <hello-world text="Button 1" v-if="term === ''"></hello-world> <hello-world ...

javascriptvue.jscomponents