用于多个类事件Jquery的单个函数

Single function for multiple class events Jquery

本文关键字:单个 函数 Jquery 事件 用于      更新时间:2023-09-26

原因是我在应用程序的不同位置使用了相同的事件。我想为.red1&做同样的函数。black1和.red2&blcak2。我怎样才能做到这一点。请更正我的代码。

function resize() {
    var position= $('.red').offset();
    if (position) {
        var top= position.top;
        var newtop = top + 20 + "px";
        $('.black').css( {
            'top': newtop 
        });
    }
}
$(window).resize(function(){
   resize();
});
window.onload = resize;
div {
    position:fixed;
}
}
.red
{
    top: 40px;
}
.red1
{
    top:80px;
}
.red2
{
    top:140px;
}
.red3
{
    top:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">red</div>
<div class="black">black</div>
<div class="red1">red1</div>
<div class="black1">black1</div>
<div class="red2">red2</div>
<div class="black2">black2</div>
<div class="red3">red3</div>
<div class="black3">black3</div>

function resize() {
    $('[class^=red]').each(function() {
      var that = $(this);
      var classNum = that.attr('class').replace('red', '');
      var position = that.offset();
      if (position) {
        var top= position.top;
        var newtop = parseInt(top) + 20 + "px";
        $('.black' + classNum).css( {
            'top': newtop 
        });
      }
   });
}
function resize(getoffset,setoffset) {  //getoffset is red1,red2. setoffset is black1,black2
    var position= $('.'+ getoffset).offset();
    if (position) {
        var top= position.top;
        var newtop = top + 20 + "px";
        $('.' + setoffset).css( {
            'top': newtop 
        });
    }
}
$(window).resize(function(){
   resize();
});
window.onload = resize();