Отображается несколько заголовков

Question

Я хочу щелкнуть несколько объектов и отобразить все заголовки в заголовке.

В настоящее время отображается только ОДИН заголовок.

Поэтому, когда я нажимаю 1, 2 и 3, он должен отображать все свои заголовки.

$("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>

Answer 1

Использование такого класса - ПРИМЕЧАНИЕ. Я изменил атрибут на правильный атрибут данных

$("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

Вы можете обработать событие с массивом. Назначьте класс активации и динамически управляйте вставкой и удалением.

let liSelected = [];
$("document").ready(function() {
    $(".ui-widget-content").on("click", function() {
        if($(this).hasClass('ui-selecting')){
            $(this).removeClass('ui-selecting');
            removeItem(liSelected, $(this).attr('text'));
        }else{
            $(this).addClass('ui-selecting');
            liSelected.push($(this).attr('text'))
        }
        $("#select-result").text(liSelected.length === 0 ? "none" : liSelected.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

Это должно работать на вас!

let clicked = [];
$("document").ready(function() {
  $(".ui-widget-content").on("click", function() {
    
    if(clicked.indexOf($(this).attr('text')) >= 0){
      clicked.splice(clicked.indexOf($(this).attr('text')), 1);
      $("#select-result").text(clicked.join(", "));
    }
    else{
      clicked.push($(this).attr('text'));
      $("#select-result").text(clicked.join(", "));
    }
    if(clicked.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>

Answer 4

Вы можете использовать функцию добавления в jquery

<!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've selected:</span> <span id="select-result"></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>
  <script>
    $("document").ready(function() {
      $(".ui-widget-content").on("click", function() {
        $("#select-result").append($(this).attr('text'));
      });
    });
  </script>
</body>

</html>