Javascript 添加计数器_Javascript_Jquery_Html_Css

Javascript 添加计数器

javascript jquery html css

Javascript 添加计数器,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试添加一个计数器，因此当单击一个数字时，它应该显示“您已从5个数字中选择了1个”，这意味着此人必须选择5个数字。但如果单击了相同的数字，则应取消选择，然后返回“您已从5中选择0”。所以你可以点击1,5,7，但它会显示“你从5个选项中选择了3个” 盖利斯 #回馈{ 字号：1.4em； } #可选。用户界面选择{ 背景#FECA40； } #可选择。用户界面已选择{ 背景：#F39814；颜色：白色； } #可选的{ 列表样式类型：无；保证金：0；填充：0；宽度：450px； }

我正在尝试添加一个计数器，因此当单击一个数字时，它应该显示“您已从5个数字中选择了1个”，这意味着此人必须选择5个数字。但如果单击了相同的数字，则应取消选择，然后返回“您已从5中选择0”。所以你可以点击1,5,7，但它会显示“你从5个选项中选择了3个”


盖利斯
#回馈{
字号：1.4em；
}
#可选。用户界面选择{
背景#FECA40；
}
#可选择。用户界面已选择{
背景：#F39814；
颜色：白色；
}
#可选的{
列表样式类型：无；
保证金：0；
填充：0；
宽度：450px；
}
#可选锂{
利润率：10px；
填充：1px；
浮动：左；
宽度：100px；
高度：80px；
字号：4em；
文本对齐：居中；
}
.包装纸{
显示器：flex；
保证金：自动；
证明内容：中心；
对齐项目：居中；
}

您已选择：无。

1
2
3
4
5
6
7
8
9
10
11
12
//这使得每个框都可以单击，并将其添加到标题数组中。
让liSelected=[]；
$（“文档”）.ready（函数（）{
$（“.ui小部件内容”）。在（“单击”，函数（）{
if（$（this）.hasClass（'ui-selecting'））{
$（this.removeClass（'ui-selecting'）；
removietem（liSelected，$（this.attr（'text'））；
}否则{
$（this.addClass（'ui-selecting'）；
liSelected.push（$（this.attr（'text'））
}
$（“#选择结果”）.text（liSelected.length==0？“无”：liSelected.join（“，”）；
});
//这将检查现有标题是否在数组中，然后将其删除
函数removeItem（数组、项）{
for（数组中的变量i）{
if（数组[i]==项）{
阵列拼接（i，1）；
打破
}
}
}
});

您当前正在显示所选项目的数组。只需显示长度即可

你可以改变

$（“#选择结果”）.text（liSelected.length==0？“无”：liSelected.join（“，”）
到
$（“#选择结果”）.text（liSelected.length==0？“无”：（liSelected.length+'out of 5'）您能否在问题中更清楚地说明您得到了什么输出，并将其与您期望的结果进行比较？
<!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>Gaarith</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">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>
      <script>
         // this makes each box clickable and adds it to an array the title.
         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(", "));
    });
//   this checks if the existing title is in the array and then removes it
    function removeItem(array, item){
        for(var i in array){
            if(array[i]==item){
                array.splice(i,1);
                break;
            }
        }
    }
});
      </script>
   </body>
</html>