javascript - 关联点击事件和多个item，没有multiple functions

Question

我遇到的问题是我觉得我的 Javascript 效率不高，而且有更好的方法来完成我想做的事情。为了展示我的问题，我在 JSFiddle 中创建了一个较小版本的元素。

JSFiddle

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

在每个函数中，所有之前被点击的 block 都被隐藏，并且它们的“clicked”类被移除。 (点击类基本上是一个标志，告诉函数是否隐藏/显示信息)

这是其中一个功能的示例……这是解决此问题的正确方法吗？请记住，我的元素这次是 70 次，所以我每次都检查并隐藏每个信息 block 。

$('.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();
})