jQuery&HTML数据属性操作，实际上是试图将新值修改/附加到已添加的值 [英] jQuery & HTML data attribute manipulation, Really trying to modify / append a new value to already added value
问题描述
我正在从数据库和jQuery datepicker中存在的数据库和目标日期中获取数据日期和其他一些信息.我做了所有工作，但最后一件事是，当事件添加到日历中时，它会创建带有信息的 data-tooltip 以在悬停时显示，这是如果当天有两个事件，只有最后一个会发生问题将显示一个.
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.
每个循环中我在这里使用很多数组，因此最后一个 data-tootltip 将覆盖之前添加的数组.
I am using a lot of arrays here in for each loop so last data-tootltip will overwrite the one added before it.
示例中的示例数据应在 2020-10-16 工具提示上显示两个事件.
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.
我已阅读:使用jQuery更新data属性的值，将数据属性添加到DOM 和
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?
添加工具提示的代码:
$( '.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;
我已经阅读了有关 spread 和 concat 的内容，还有
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>推荐答案
一些简单的解决方案是选择现有的工具提示(如果存在)，而不是添加新的工具提示.您需要更改的代码是:
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');
JS小提琴上的工作示例.
您还将注意到CSS的一个小变化(最后)，我更改了工具提示并添加了以下内容:
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... */
这篇关于jQuery&HTML数据属性操作，实际上是试图将新值修改/附加到已添加的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
