关联点击事件和多个项目,没有多个功能

Question

我遇到的问题是我觉得我的Javascript效率不高,并且有更好的方法来完成我想要做的事情.为了显示我的问题,我在JSFiddle中创建了一个较小版本的项目.

的jsfiddle

最终目标是让左侧的块在单击时在大灰色框中显示信息.这是在JSFiddle中实现的!问题是(我认为这是一个问题)是我为每个块都有一个单独的javascript函数.(这是一个小规模的例子,我的项目有70多个"块")

在每个函数中,隐藏所有先前单击的块,并删除它们的"单击"类.(Clicked类基本上是一个告诉函数是否隐藏/显示信息的标志)

这是其中一个功能的例子......这是正确的方法吗？记住,我的项目是70次,所以我每次都会检查并隐藏每个信息块.

$('.block1').on('click', function (e) {
    if ($(this).hasClass('block1-clicked')) {
       $('.block1-info').fadeOut();
    }
    else {
        $('.block2-info').fadeOut();
        $('.block2').removeClass('block2-clicked');
        $('.block3-info').fadeOut();
        $('.block3').removeClass('block3-clicked');
        $('.block4-info').fadeOut();
        $('.block4').removeClass('block4-clicked');
        $('.block1-info').fadeIn();

    }
   $(this).toggleClass('block1-clicked') ;
});

谢谢!!

Answer 1

有几种方法可以实现这一目标.如果使用以下模式,则可以使用单击的单位的ID来设置相关DIV的状态.通过使用两个类,您可以使用一个清除所有项目,另一个用于设置单个项目

<div id="block1" class="block">Block 1</div>
. . .

<div class="info"></div>
<div class="blockinfo block1">Info about Block 1</div>
... etc

JS:

$('.block').on('click', function() {
     var myId = $(this).attr('id');
     $('.block').removeClass('clicked');
     $(this).addClass('clicked');
     $('.blockinfo').fadeout();
     $('.' + myId).fadeIn();
})