function getElements(list) {
var checkList = document.getElementById(list);
var items = document.getElementById(list + '_items');
if (items.classList.contains('visible')) {
items.classList.remove('visible');
items.style.display = "none";
} else {
items.classList.add('visible');
items.style.display = "block";
}
};
$('html').click(function() {
$('#list1_items').hide();
});
$('#list1').click(function(event) {
event.stopPropagation();
$('#list2_items').hide();
});
$('html').click(function() {
$('#list2_items').hide();
});
$('#list2').click(function(event) {
event.stopPropagation();
$('#list1_items').hide();
});
let list1 = new Set();
let list2 = new Set();
document.querySelector('#list1_items').addEventListener('change', e => {
e.target.checked ? list1.add(e.target.value) : list1.delete(e.target.value);
if(list1.size) document.querySelectorAll('#list2_items > li > input').forEach(el => el.disabled = true);
else document.querySelectorAll('#list2_items > li > input').forEach(el => el.disabled = false);
});
document.querySelector('#list2_items').addEventListener('change', e => {
e.target.checked ? list2.add(e.target.value) : list2.delete(e.target.value);
if(list2.size) document.querySelectorAll('#list1_items > li > input').forEach(el => el.disabled = true);
else
document.querySelectorAll('#list1_items > li > input').forEach(el => el.disabled = false);
});
$('select[name="employee_id"]').on('change', function() {
console.log('inside script')
var employee_id = document.getElementById('employee_id').selectedOptions[0].value;
console.log(employee_id)
$.ajax({
type: "POST",
url: "/kpiDetailsList",
datatype: "json",
data: JSON.stringify({
'employee_id': employee_id,
}),
contentType: 'application/json;charset=UTF-8',
success: function (data) {
console.log(data);
var parsed_data = data;
monthly_list = parsed_data.monthly_list;
quarterly_list = parsed_data.quarterly_list;
console.log(monthly_list.length)
console.log(quarterly_list.length)
if(monthly_list.length != 0 || quarterly_list.length != 0) {
console.log('inside first if')
$('#list1').css('pointer-events','');
$('#list1_items').empty();
for (index = 0; index < monthly_list.length; index++) {
$('#list1_items').append("<li><input type='checkbox' name='month' value='" + monthly_list[index] + "'id='" + monthly_list[index] + "'><label for='" + monthly_list[index] + "'>" + monthly_list[index] + "</label></li>");
}
$('#list2').css('pointer-events','');
$('#list2_items').empty();
for (index = 0; index < quarterly_list.length; index++) {
if(quarterly_list[index] == 'Quarter1') {
$('#list2_items').append("<li><input type='checkbox' name='quarter' value='" + quarterly_list[index] + "'id='" + quarterly_list[index] + "'><label for='" + quarterly_list[index] + "'> Apr - Jun (Quarter 1) </label></li>");
}
else if(quarterly_list[index] == 'Quarter2') {
$('#list2_items').append("<li><input type='checkbox' name='quarter' value='" + quarterly_list[index] + "'id='" + quarterly_list[index] + "'><label for='" + quarterly_list[index] + "'> Jul - Sep (Quarter 2) </label></li>");
}
else if(quarterly_list[index] == 'Quarter3') {
$('#list2_items').append("<li><input type='checkbox' name='quarter' value='" + quarterly_list[index] + "'id='" + quarterly_list[index] + "'><label for='" + quarterly_list[index] + "'> Oct - Dec (Quarter 3) </label></li>");
}
else if(quarterly_list[index] == 'Quarter4') {
$('#list2_items').append("<li><input type='checkbox' name='quarter' value='" + quarterly_list[index] + "'id='" + quarterly_list[index] + "'><label for='" + quarterly_list[index] + "'> Jan - Mar (Quarter 4) </label></li>");
}
else {
console.log('Data not found')
}
}
}
else if (monthly_list.length == 0 && quarterly_list.length == 0) {
console.log('inside second if')
$('#list1').css('pointer-events','none');
$("#list1").tooltip();
$('#list2').css('pointer-events','none');
$("#list2").attr("title", "Data not available");
}
else if (monthly_list.length == 0 || quarterly_list.length == 0) {
console.log('inside third if')
if (monthly_list.length == 0) {
console.log('inside monthly list')
$('#list1').css('pointer-events','none');
$("#list1").attr("title", "Data not available");
}
else {
$('#list2').css('pointer-events','none');
$("#list2").attr("title", "Data not available");
}
}
else {
console.log("data not found")
}
},
error : function(e) {
console.log("Error :"+e)
}
});
});.dropdown-check-list {
display: inline-block;
width: 230px;
position: relative;
padding: 5px 10px 5px 10px;
margin-right: 5px;
justify-content: center;
box-sizing: border-box;
font-size: 16px;
margin-bottom: 15px;
width: 260px;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #000;
width: 230px;
justify-content: right;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='34' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat ;
background-position-x: 100% ;
background-position-y: 5px;
}
.dropdown-check-list block{
box-sizing: border-box;
display: inline-block;
font-size: 16px;
padding: 10px;
margin-bottom: 15px;
width: 260px;
}
#criteria {
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='34' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat ;
background-position-x: 100% ;
background-position-y: 5px;
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
}
/*.dropdown-check-list .anchor:after {
position: absolute;
display: inline-block;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}*/
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
position: absolute;
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
z-index:99;
background-color: #ffffff;
width: 230px;
height: 150px;
overflow: auto;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list1" class="dropdown-check-list" tabindex="1">
<div class="custom-dropdown">
<span class="anchor" onclick="getElements('list1')">Select Months</span>
<div class="options">
<ul id="list1_items" class="items" name="month" style="display: none;"><li><input type="checkbox" name="month" value="Sep-2021" id="Sep-2021"><label for="Sep-2021">Sep-2021</label></li><li><input type="checkbox" name="month" value="Jun-2021" id="Jun-2021"><label for="Jun-2021">Jun-2021</label></li><li><input type="checkbox" name="month" value="Aug-2021" id="Aug-2021"><label for="Aug-2021">Aug-2021</label></li><li><input type="checkbox" name="month" value="Jul-2021" id="Jul-2021"><label for="Jul-2021">Jul-2021</label></li><li><input type="checkbox" name="month" value="May-2021" id="May-2021"><label for="May-2021">May-2021</label></li><li><input type="checkbox" name="month" value="Apr-2021" id="Apr-2021"><label for="Apr-2021">Apr-2021</label></li></ul>
</div>
</div>
</div>
<div id="list2" class="dropdown-check-list" tabindex="100">
<div class="custom-dropdown">
<span class="anchor" onclick="getElements('list2')">Select Quarter</span>
<div class="options">
<ul id="list2_items" class="items" name="quarter" style="display: none;"><li><input type="checkbox" name="quarter" value="Quarter1" id="Quarter1"><label for="Quarter1"> Apr - Jun (Quarter 1) </label></li><li><input type="checkbox" name="quarter" value="Quarter2" id="Quarter2"><label for="Quarter2"> Jul - Sep (Quarter 2) </label></li></ul>
</div>
</div>
</div>所以我的 Jquery 代码是：
else if (monthly_list.length == 0 && quarterly_list.length == 0) {
console.log('inside second if')
$('#list1').css('pointer-events','none');
$("#list1").attr("title", "Data not available");
$('#list2').css('pointer-events','none');
$("#list2").attr("title", "Data not available");
}
else if (monthly_list.length == 0 || quarterly_list.length == 0) {
console.log('inside third if')
if (monthly_list.length == 0) {
console.log('inside monthly list')
$('#list1').css('pointer-events','none');
$("#list1").attr("title", "Data not available");
}
else {
$('#list2').css('pointer-events','none');
$("#list2").attr("title", "Data not available");
}
我尝试了这个，以添加“数据不可用”工具提示，但这不起作用，如果有人可以帮助我找出我出错的地方。实际上所有这些都在 AJAX 调用中，如果特定下拉列表中没有数据，我需要关闭下拉列表，因此 pointer-events,none 还显示一个不起作用的工具提示。
谢谢
答案 0 :(得分：0)
您可以轻松地使用此代码来创建工具提示：
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</body>
</html>