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

问题

I am fetching data dates and some other info from DB and target days that exists in a database and jQuery datepicker. I made everything to work but one last thing, when event is added into calendar it creates data-tooltip with info to show on hover, problem with this is if there are two events on that day, only last one will be shown.

I am using a lot of arrays here in for each loop so last data-tootltip will overwrite the one added before it.

From sample data in example there should be two events shown on 2020-10-16 tool-tip.

As its seems now, from current situations how I set up things seems like I cannot even fetch data and combine it.

I have read: Updating the value of data attribute using jQuery, Adding data attribute to DOM, and official documentation. And none of it helps me, is there a way to really modify data and just append the value? Or have I missed something?

Code that adds tool-tip:

    $( '.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] );

Other thing that would be helpful and would solve this problem if I could join two or more arrays in one if dates are the same, 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;

I am already splitting it in all possible ways. But I don't know how to get this result for example:

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;

I have read about spread and concat, also this How to merge two arrays in JavaScript and de-duplicate items but Not sure how to apply this on my case as I need to join them just based on parts of array(date).

And tips are helpful, been stuck at this for two days now. (sorry for long 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>

回答1:

Some simple solution would be to pick up existing tooltip (if it exists), than append new one. The code you need to change is:

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');

Working example on JS Fiddle.

You will also notice a small change to CSS (at the end), where I changed the tooltip and added:

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

来源：https://stackoverflow.com/questions/62793559/jquery-html-data-attribute-manipulation-really-trying-to-modify-append-a-ne