1

コードを統合するのに少し助けが必要です。これは動作するコードですが、単純化しようとすると取得できないようです。

私はjqueryでそれを書きましたが、JavaScript全体が初めてです。基本的にはループですが、ループする方法がわかりません。

<script type="text/javascript">
// house_one
    $('.house_one')
    .mouseenter(function() {
      $('.box_one').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_one').removeClass('hover');
    });
    $('.box_one')
    .mouseenter(function() {
      $('.house_one').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_one').removeClass('house_hover');
    });
//house_two
    $('.house_two')
    .mouseenter(function() {
      $('.box_two').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_two').removeClass('hover');
    });
            $('.box_two')
    .mouseenter(function() {
      $('.house_two').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_two').removeClass('house_hover');
    });
// house_three
    $('.house_three')
    .mouseenter(function() {
      $('.box_three').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_three').removeClass('hover');
    });
    $('.box_three')
    .mouseenter(function() {
      $('.house_three').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_three').removeClass('house_hover');
    });
// house_four
    $('.house_four')
    .mouseenter(function() {
      $('.box_four').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_four').removeClass('hover');
    });
    $('.box_four')
    .mouseenter(function() {
      $('.house_four').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_four').removeClass('house_hover');
    });
// house_five
    $('.house_five')
    .mouseenter(function() {
      $('.box_five').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_five').removeClass('hover');
    });
    $('.box_five')
    .mouseenter(function() {
      $('.house_five').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_five').removeClass('house_hover');
    });
// house_six
    $('.house_six')
    .mouseenter(function() {
      $('.box_six').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_six').removeClass('hover');
    });
    $('.box_six')
    .mouseenter(function() {
      $('.house_six').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_six').removeClass('house_hover');
    });
// house_seven
    $('.house_seven')
    .mouseenter(function() {
      $('.box_seven').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_seven').removeClass('hover');
    });
    $('.box_seven')
    .mouseenter(function() {
      $('.house_seven').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_seven').removeClass('house_hover');
    });
// house_eight
    $('.house_eight')
    .mouseenter(function() {
      $('.box_eight').addClass('hover');
    })
    .mouseleave(function() {
      $('.box_eight').removeClass('hover');
    });
    $('.box_eight')
    .mouseenter(function() {
      $('.house_eight').addClass('house_hover');
    })
    .mouseleave(function() {
      $('.house_eight').removeClass('house_hover');
    });
</script>
4

2 に答える 2

3

2 つのクラスboxを使用するだけhouseで、そのすべてを次のように減らすことができます。

$('.house').on('mouseenter mouseleave', function(){
  $(this).closest('.box').toggleClass('hover')
})

$('.box').on('mouseenter mouseleave', function(){
  $(this).closest('.house').toggleClass('house_hover')
})

編集：

closest()要素が同じコンテナを共有していないためにマークアップが機能しない場合は、一般的なクラスに加えて id を使用します。

$('.house').on('mouseenter mouseleave', function(){
  // Assuming id = house_one (or two, three etc...)
  var id = this.id.split('_')[1]
  $('#box_'+ id).toggleClass('hover')
})
于 2012-07-11T00:56:48.840 に答える
0 
function setupHovers(house, box){
    house = $(house);
    box   = $(box);
    house.hover(function(){  box.toggleClass('hover');  });
    box.hover(function(){    house.toggleClass('house_hover');  });
}

boxHouseArray = ['one','two','three','four','five','six' ...]; //

for(boxHouse in boxHouseArray){
   setupHovers('.house_'+boxHouse, '#box_'+boxHouse);
}

または、マークアップを少し変更することをお勧めします。

<a href="/interiors/house_1" class="house_list">House 04</a>
 and
<div class="box"></div>

今、あなたはこのように行くことができます:

var houses = $('.house_list'), boxes = $('.box');
houses.hover(function(){
    boxes.eq( houses.index(this) ).toggleClass('hover'); 
});
boxes.hover(function(){
    houses.eq( boxes.index(this) ).toggleClass('house_hover'); 
});

ここでのアイデアは、追加の ID やマークアップではなく、構成としてマークアップ内の要素の順序を使用するだけです。最初のボックスの上にマウスを置いたとしましょう:index(this)それがページの最初のボックスであるかどうかを教えてくれ、最初の家でホバー クラスをトリガーします。eq

于 2012-07-11T01:19:49.553 に答える