2

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

我在这里为每个循环使用了很多数组,所以最后一个data-tootltip将覆盖在它之前添加的那个。

2020-10-16从示例中的示例数据来看,工具提示上应该显示两个事件。

现在看来,从目前的情况来看,我如何设置东西似乎我什至无法获取数据并将其组合起来。

我已阅读:使用 jQuery 更新数据属性的值将数据属性添加到 DOM官方文档。而且这些都对我没有帮助,有没有办法真正修改数据并附加值?还是我错过了什么?

添加工具提示的代码:

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

我已经阅读了spreadconcat,以及如何在 JavaScript 中合并两个数组并删除重复项,但不确定如何将其应用于我的案例,因为我需要仅基于数组(日期)的部分来加入它们。

提示很有帮助,现在已经坚持了两天了。(对不起,很长的帖子)。

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

4

1 回答 1

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... */
于 2020-07-08T12:57:14.877 回答