jquery - jQuery 碰撞 - 如果任何标签重叠

Question

我为每个块创建了标签，它应该显示在块的左上角。如果标签与另一个重叠，我必须将重叠的标签向上移动 34px。

仅当标签重叠时才会发生这种情况

PS内容是动态出现的，因此我无权添加任何类或 ID 以通过 CSS 实现 :(

HTML：

<div class="main-div">

  <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x150">
    <div class="resTotalClicksDiv">label</div>
  </div>
  <br><br><br>
    <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x50">
    <div class="resTotalClicksDiv">label</div>
  </div>

<br><br><br>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png">
    <div class="resTotalClicksDiv">Facebook</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png">
    <div class="resTotalClicksDiv">Twitter</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png">
    <div class="resTotalClicksDiv">Linkedin</div>
  </div>

</div>

CSS：

body{margin:50px auto;}
.main-div{width:400px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:30px 20px 10px 20px;background:#f5f5f5;}
.hrefOverlay{position:relative;display:inline-block;}
.resTotalClicksDiv{position:absolute;top: -25px;left:0;background-color: #eac0c0;padding: 5px;font-size: 12px;border:1px solid red;}
.resTotalClicksDiv:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: -1px;top: 0px;height: 34px;}

jQuery

var newStyle = document.createElement('style');             

$('.hrefOverlay').find('.resTotalClicksDiv').each(function(i) {
  $(this).addClass('resTotalClicksDiv-'+i);
  $(this).css('top', -(i+1)*22 + 'px')
  newStyle.appendChild(document.createTextNode(".resTotalClicksDiv-"+i+":before{height:"+(34+(i)*22)+"px;}"));
    document.head.appendChild(newStyle);

});

感谢@Haresh Vidja 提供 jQuery 解决方案

我得到了什么：Fiddle

从

至

期望的结果：

标签： jquery

Answer 1

这是具有所需输出的更新小提琴。使用特定于每个按钮的 Jquery 添加类，然后更改 CSS

$(window).load(function(){
	$(".hrefOverlay").each(function(){
  	var eleText = $(this).find(".resTotalClicksDiv").text().toLowerCase();
    if(eleText == "facebook"){
				$(this).find(".resTotalClicksDiv").addClass("fw");
        }
        else if(eleText == "twitter"){
        $(this).find(".resTotalClicksDiv").addClass("tw");
        }
        else if(eleText == "linkedin"){
        $(this).find(".resTotalClicksDiv").addClass("ln");
        }
  });
});

body{margin:50px auto;}
.main-div{width:400px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:30px 20px 10px 20px;background:#f5f5f5;}


.hrefOverlay{position:relative;display:inline-block;}
.resTotalClicksDiv{position:absolute;top: -25px;left:0;background-color: #eac0c0;padding: 5px;font-size: 12px;border:1px solid red;}
.resTotalClicksDiv:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: -1px;top: 0px;height: 34px;}
.resTotalClicksDiv.tw{
  top:-50px;
}

.resTotalClicksDiv.tw:before{
height:60px;
    content: "";
}
.resTotalClicksDiv.ln{
  top:-76px;
}

.resTotalClicksDiv.ln:before{
height:80px;
    content: "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div">

  <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x150">
    <div class="resTotalClicksDiv">label</div>
  </div>
  <br><br><br>
    <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x50">
    <div class="resTotalClicksDiv">label</div>
  </div>
  
<br><br><br>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png">
    <div class="resTotalClicksDiv">Facebook</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png">
    <div class="resTotalClicksDiv">Twitter</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png">
    <div class="resTotalClicksDiv">Linkedin</div>
  </div>
  
</div>