顯示多個標題

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

您可以在 jquery 中使用append函數

 <!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>

Answer 4

這個應該適合你！

 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>