javascript - Jquery 多个类事件的单一函数

Question

原因是我在应用程序的不同位置使用相同的事件。我想分别对 .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>

Answer 1

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 
        });
      }
   });
}