Question

我坚持使用一些代码而且我不清楚如何在不编写大量代码的情况下使其正常运行。这个想法是当一个div切换到显示隐藏文本时，当你点击另一个div时，那个div会切换而只显示另一个div。我知道如何手动完成（使用船载代码），但我想知道是否有一个“通用”代码行，我可以在每个代码后面粘贴它。

这是我的JS：

        $(document).ready(function(){
    $('#bioInfo').on('click', function(){
    $('#bioInfoText').toggle();
  });
     $('#bioTech').on('click', function(){
    $('#bioInfoText').toggle();
  });
    $('#bioFuture').on('click', function(){
    $('#bioFutureText').toggle();
  });
    $('#bioCont').on('click', function(){
    $('#bioContText').toggle();
  });
    $('#bioAdd').on('click', function(){
    $('#bioAddText').toggle();
  });
    $('#bioPrac').on('click', function(){
    $('#bioPracText').toggle();
  });
     $('#automInfo').on('click', function(){
    $('#automInfoText').toggle();
  });
    $('#automFuture').on('click', function(){
    $('#automFutureText').toggle();
  });
     $('#autom').on('click', function(){
    $('#automInfoText').toggle();
  });
    $('#automContent').on('click', function(){
    $('#automContentText').toggle();
  });
    $('#automAdd').on('click', function(){
    $('#automAddText').toggle();
  });
    $('#automPrac').on('click', function(){
    $('#automPracText').toggle();
  });
     $('#itInfo').on('click', function(){
    $('#itInfoText').toggle();
  });
     $('#it').on('click', function(){
    $('#itInfoText').toggle();
  });
    $('#itFuture').on('click', function(){
    $('#itFutureText').toggle();
  });
    $('#itCont').on('click', function(){
    $('#itContText').toggle();
  });
    $('#itAdd').on('click', function(){
    $('#itAddText').toggle();
  });
    $('#itPrac').on('click', function(){
    $('#itPracText').toggle();
  });

正如你可以看到它逐个切换，但只有在我手动点击该个别div时才会切换，这是不可取的。

Answer 1

将它放在不同的实现中会更好。对于解决方案，请使用重置功能：

function resetAll() {
  $('[id$="Text"]').hide();
  // Translates to:
  $("#bioInfoText, #bioInfoText, #bioFutureText, #bioContText, #bioAddText, #bioPracText, #automInfoText, #automFutureText, #automInfoText, #automContentText, #automAddText, #automPracText, #itInfoText, #itInfoText, #itFutureText, #itContText, #itAddText, #itPracText").hide();
}

然后在每次点击时调用resetAll()函数。

Answer 2

如果我是你，我只会为你想要使用的元素添加一个类。然后你可以做这样的事情：

$('body').on('click', '.someClass', function(){
    var id = $(this).attr('id');
    $('.someClass').hide();
    $('.someClass #' + id + 'Text').show(); // Following your naming convention 
});

现在我不知道你的HTML看起来如何，所以我不能说它是否100％正确......但我认为你明白了。

当div被切换时，已经切换了divs untoggle

2 个答案: