jQuery & HTML 数据属性操作，真正试图修改/附加一个新值到已经添加的值

Question

我正在从数据库和数据库中存在的目标日期和 jQuery 日期选择器中获取数据日期和一些其他信息。我让一切正常，但最后一件事，当事件被添加到日历中时，它会创建 data-tooltip 并在悬停时显示信息，问题是如果那天有两个事件，只会显示最后一个。

我在每个循环中使用了很多数组，因此最后一个 data-tootltip 将覆盖之前添加的数组。

根据示例中的示例数据，2020-10-16 工具提示中应该显示两个事件。

现在看来，从目前的情况来看，我的设置方式似乎我什至无法获取数据并将其组合起来。

我已阅读：Updating the value of data attribute using jQuery, Adding data attribute to DOM, and official documentation。 none 对我有帮助，有没有办法真正修改数据并附加值？或者我错过了什么？

添加工具提示的代码：

    $( '.ui-datepicker-calendar * td[data-month="'+datum[1]+'"][data-year="'+datum[0]+'"]
 a[data-dani="'+datum[2]+'"]' ).css("background-color", "orange")
.attr('data-tooltip','ID: '+arr2[0]+' / Naš br: '+arr2[2]+' / Vrijeme: '+dat[1] );

如果我可以在日期相同的情况下将两个或多个数组合并为一个，那么其他有用的东西将解决这个问题，数据：

11,2020-07-10 00:00:00,P-1/1;
12,2020-08-16 12:00:00,P-1/1;
13,2020-10-16 09:00:00,P-1/1;
14,2020-08-16 02:00:00,P-2/1;

我已经在以各种可能的方式拆分它了。但是我不知道如何得到这个结果，例如：

11,2020-07-10 00:00:00,P-1/1;
12,2020-08-16 12:00:00,P-1/1 + 14, 02:00:00,P-2/1;
13,2020-10-16 09:00:00,P-1/1;

我已经阅读了 spread 和 concat，还有这个 How to merge two arrays in JavaScript and de-duplicate items 但不确定如何在我的案例中应用它，因为我需要根据数组的一部分加入它们(日期).

小贴士很有用，这两天一直卡在这个问题上。（很抱歉post）。

$( document ).ready(function () {
  $('#datepicker-cal * table *').click(false);     
  //$.get( "include-cal.php", { rok: "rok-sve"} )
      //.done(function( data ) {
         //console.log( data );
         
         
         var data="11,2020-07-10 00:00:00,P-1/1;12,2020-08-16 12:00:00,P-1/1;13,2020-10-16 09:00:00,P-1/1;14,2020-08-16 02:00:00,P-2/1;";
         var array=data.split(";");

         var arr = array.filter(function (el) {
            return el != "";
          });
         //console.log( arr ); 

         jQuery.each( arr, function( i, val ) {
          arr2=val.split(",");

          var dat=arr2[1].split(" ");
          //console.log( dat[0] );
          var datum=dat[0].split("-");

          //console.log( datum );
          //console.log( datum[1] );
          if (datum[1].startsWith("0")) {
            datum[1]=datum[1].replace("0", "");
          }
          if (datum[2].startsWith("0")) {
            datum[2]=datum[2].replace("0", "");
          }
          //console.log( datum[1] );
          //console.log( datum[2] );

          datum[1]=datum[1]-1;
          var dani=$( '.ui-datepicker-calendar * [data-month="'+datum[1]+'"][data-year="'+datum[0]+'"] a' );
          jQuery.each( dani, function( k, bla ) {
            $(this).attr('data-dani', $(this).html());
            $(this).addClass("tooltip-top tooltip");
            //$(this).attr('data-tooltip',"");
          });



$( '.ui-datepicker-calendar * td[data-month="'+datum[1]+'"][data-year="'+datum[0]+'"] a[data-dani="'+datum[2]+'"]' ).css("background-color", "orange").attr('data-tooltip','ID: '+arr2[0]+' / Naš br: '+arr2[2]+' / Vrijeme: '+dat[1] );

// var datatultip=$( '.ui-datepicker-calendar * td[data-month="'+datum[1]+'"][data-year="'+datum[0]+'"] a[data-dani="'+datum[2]+'"]' ).css("background-color", "orange").data('tooltip');

// console.log(datatultip);
          });

       // })
});

#datepicker-container{
  text-align:center;
}
#datepicker-center{
  display:inline-block;
  margin:0 auto;
}
.tooltip {
  color: #900;
  text-decoration: none;
}
 
.tooltip:hover {
  color: red;
  position: relative;
}
 
/* Tooltip on Top */
.tooltip-top[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  bottom: 100%;
  white-space: nowrap;
  z-index: 20px;
 
  background-color: #000;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<script type="text/javascript">    $( function() {
                        $( "#datepicker-cal" ).datepicker({
                          numberOfMonths: 2
                        });
                      } );</script>
                      <div id="datepicker-cal"></div>

Answer 1

一些简单的解决方案是选择现有的工具提示（如果存在），而不是附加新的。您需要更改的代码是：

var thisCell = $('.ui-datepicker-calendar * td[data-month="' + datum[1] + '"][data-year="' + datum[0] + '"] a[data-dani="' + datum[2] + '"]');
thisTooltip = thisCell.data('tooltip') || ''; /* Keep existing data */
thisCell.css("background-color", "orange").attr('data-tooltip', thisTooltip + 'ID: ' + arr2[0] + ' / Naš br: ' + arr2[2] + ' / Vrijeme: ' + dat[1] + '\n');

JS Fiddle 上的工作示例。

您还会注意到 CSS 的一个小变化（最后），我在其中更改了工具提示并添加了：

white-space: pre-line; /* This will allow \n to serve as break */
text-align: left; /* Cosmetics... */

jQuery & HTML 数据属性操作，真正试图修改/附加一个新值到已经添加的值

jQuery & HTML data attribute manipulation, Really trying to modify / append a new value to already added value

javascript

jquery

datepicker

uidatepicker

jquery-events