当第一个元素被选中时，工具提示不显示第一个元素的左边
Tooltip not showing left of first element when first element selected
在我的代码中是一个到目前为止我得到的例子。我使用$('.recommended_slot:first')来查找要附加工具提示的元素，但是当它被附加时，它显示在第一个推荐槽的下一个元素旁边。
如果有人有任何建议，如何做得更好，或者为什么它搞砸了。那我很想听听你的建议。谢谢:)
JSFIDDLE例子
$(document).ready(function(){
addPopOverEvery(2, '.slot:not(.alreadyBooked)');
findBestRecommendedSlot();
});
function addPopOverEvery(n, selector) {
$(selector).each(function() {
var $original = $(this),
$self = $(this),
$is_pop = true,
i = 0;
if ($original.prev().is(selector)) {
for (i = 1; i < n; i++) {
$self = $self.prev();
if (!$self.is(selector) || $self.find('.popOver').length) {
$is_pop = false;
break;
}
}
}
if ($is_pop) {
$self = $original;
for (i = 1; i < n; i++) {
$self = $self.next();
if (!$self.is(selector)) {
$is_pop = false;
break;
}
}
}
if ($is_pop) {
$original.addClass("recommended_slot");
$original.css("color", "red");
}
});
}
function findBestRecommendedSlot(){
$('.recommended_slot:first').text('recommended');
$('.recommended_slot:first').append('<span class="tooltiptext">This slot is recommended</span>');
}.popOver{
width:400px;
height: 30px;
background: green;
position: absolute;
z-index: 999;
margin-left: 120px;
opacity: 0.5;
color: white!important;
}
.tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
margin-right: 330px;
z-index: 1;
display: inline-block;
float: right;
margin-top: 5px;
margin-bottom: -5px;
}
.tooltiptext::after {
content: "";
position: absolute;
margin-left: -112px;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="slot">15:10 18/08/2016</li>
<li class="slot">15:15 18/08/2016</li>
<li class="slot alreadyBooked">15:20 18/08/2016</li>
<li class="slot alreadyBooked">15:25 18/08/2016</li>
<li class="slot">15:30 18/08/2016</li>
<li class="slot">15:35 18/08/2016</li>
</ul>它实际上是正确的，只是你的CSS把它弄乱了。;)
$(document).ready(function(){
addPopOverEvery(2, '.slot:not(.alreadyBooked)');
findBestRecommendedSlot();
});
function addPopOverEvery(n, selector) {
$(selector).each(function() {
var $original = $(this),
$self = $(this),
$is_pop = true,
i = 0;
if ($original.prev().is(selector)) {
for (i = 1; i < n; i++) {
$self = $self.prev();
if (!$self.is(selector) || $self.find('.popOver').length) {
$is_pop = false;
break;
}
}
}
if ($is_pop) {
$self = $original;
for (i = 1; i < n; i++) {
$self = $self.next();
if (!$self.is(selector)) {
$is_pop = false;
break;
}
}
}
if ($is_pop) {
$original.addClass("recommended_slot");
$original.css("color", "red");
}
});
}
function findBestRecommendedSlot(){
$('.recommended_slot:first').text('recommended');
$('.recommended_slot:first').append('<span class="tooltiptext">This slot is recommended</span>');
}.popOver{
width:400px;
height: 30px;
background: green;
position: absolute;
z-index: 999;
margin-left: 120px;
opacity: 0.5;
color: white!important;
}
.tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
vertical-align: middle;
border-radius: 6px;
padding: 5px 0;
margin-left: 10px;
z-index: 1;
display: inline-block;
}
.tooltiptext::after {
content: "";
position: absolute;
margin-left: -115px;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="slot">15:10 18/08/2016</li>
<li class="slot">15:15 18/08/2016</li>
<li class="slot alreadyBooked">15:20 18/08/2016</li>
<li class="slot alreadyBooked">15:25 18/08/2016</li>
<li class="slot">15:30 18/08/2016</li>
<li class="slot">15:35 18/08/2016</li>
</ul>这是特别给查理的!亲吻!
$(document).ready(function(){
addPopOverEvery(2, '.slot:not(.alreadyBooked)');
findBestRecommendedSlot();
});
function addPopOverEvery(n, selector) {
$(selector).each(function() {
var $original = $(this),
$self = $(this),
$is_pop = true,
i = 0;
if ($original.prev().is(selector)) {
for (i = 1; i < n; i++) {
$self = $self.prev();
if (!$self.is(selector) || $self.find('.popOver').length) {
$is_pop = false;
break;
}
}
}
if ($is_pop) {
$self = $original;
for (i = 1; i < n; i++) {
$self = $self.next();
if (!$self.is(selector)) {
$is_pop = false;
break;
}
}
}
if ($is_pop) {
$original.addClass("recommended_slot");
$original.css("color", "red");
}
});
}
function findBestRecommendedSlot(){
$('.recommended_slot:first').text('recommended');
$('.recommended_slot:first').append('<span class="tooltiptext">This slot is recommended</span>');
}.popOver{
width:400px;
height: 30px;
background: green;
position: absolute;
z-index: 999;
margin-left: 120px;
opacity: 0.5;
color: white!important;
}
.tooltiptext {
position: absolute;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
vertical-align: middle;
border-radius: 6px;
padding: 5px 0;
margin-left: 10px;
z-index: 1;
display: inline-block;
margin-top: -13px;
}
.tooltiptext::after {
content: "";
position: absolute;
margin-left: -115px;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="slot">15:10 18/08/2016</li>
<li class="slot">15:15 18/08/2016</li>
<li class="slot alreadyBooked">15:20 18/08/2016</li>
<li class="slot alreadyBooked">15:25 18/08/2016</li>
<li class="slot">15:30 18/08/2016</li>
<li class="slot">15:35 18/08/2016</li>
</ul>还有一个想法
$(document).ready(function(){
addPopOverEvery(2, '.slot:not(.alreadyBooked)');
findBestRecommendedSlot();
});
function addPopOverEvery(n, selector) {
$(selector).each(function() {
var $original = $(this),
$self = $(this),
$is_pop = true,
i = 0;
if ($original.prev().is(selector)) {
for (i = 1; i < n; i++) {
$self = $self.prev();
if (!$self.is(selector) || $self.find('.popOver').length) {
$is_pop = false;
break;
}
}
}
if ($is_pop) {
$self = $original;
for (i = 1; i < n; i++) {
$self = $self.next();
if (!$self.is(selector)) {
$is_pop = false;
break;
}
}
}
if ($is_pop) {
$original.addClass("recommended_slot");
$original.css("color", "red");
}
});
}
function findBestRecommendedSlot(){
$('.recommended_slot:first').text('recommended');
$('.recommended_slot:first').append('<span class="tooltiptext">This slot is recommended</span>');
}.popOver{
width:400px;
height: 30px;
background: green;
position: absolute;
z-index: 999;
margin-left: 120px;
opacity: 0.5;
color: white!important;
}
.tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
vertical-align: middle;
border-radius: 6px;
padding: 5px 0;
margin-left: 10px;
z-index: 1;
position: absolute;
top: 2px;
}
.tooltiptext::after {
content: "";
position: absolute;
margin-left: -115px;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="slot">15:10 18/08/2016</li>
<li class="slot">15:15 18/08/2016</li>
<li class="slot alreadyBooked">15:20 18/08/2016</li>
<li class="slot alreadyBooked">15:25 18/08/2016</li>
<li class="slot">15:30 18/08/2016</li>
<li class="slot">15:35 18/08/2016</li>
</ul>相关文章：
- Lodash:返回对象的第一个键，该对象的值(即数组）中有一个给定的元素(即字符串）
- Javascript:表单验证getElementById仅返回第一个id元素
- 使用jquery选择元素附近的第一个h2
- 在jQuery中，如何测试一个元素是否是同一类的多个元素中的第一个
- 只获取HTML元素的第一个类
- 如果第二个 html 元素位于第一个 html 元素上方，如何移动该元素
- 使用 querySelectorAll 获取具有该类名的所有元素，而不仅仅是第一个
- 在 javascript 中创建第二个 html 元素会删除第一个
- 如何停止在第一次按下回车键时触发第一个 onclick 事件的元素
- 获取列表中的第一个 DOM 元素
- 第一个jQuery插件-如何以正确的方式保存关联元素数据
- 如何使用Jquery选择第一个td元素及其文本
- 如何获取在视口中可见的第一个DOM元素
- 不要使用jquery选择第一个li元素
- 获取href不仅是第一个，而且是所有匹配的元素
- 如何编写一个选择器来查找第一个“输入”.在类为“x”的元素之后
- 向元素添加另一个类，但作为第一个类
- jQuery + CSS:如何检测第一个“移出”将光标移出元素
- 我如何从最接近的'tr'的第n个元素获得一个值
- Jquery删除所有的第一个span元素
