Question

我正在使用javascript根据一天中的时间切换某些对象的显示状态。代码示例如下。我想知道是否有人可以就如何重构此代码提出建议，同时改进逻辑。

switch(tcode) {             
            case 'eur'     : eur.setAttribute('style', 'display:block; opacity:0.5');
                             us.style.display   = 'none';
                             asia.style.display = 'none';
                             us_inactive.style.display   = 'block';
                             asia_inactive.style.display = 'block';
            break;

            case 'us'      : us.style.display   = 'block';
                             eur.style.display  = 'none';
                             asia.style.display = 'none';
                             eur_inactive.style.display  = 'block';
                             asia_inactive.style.display = 'block';

            break;

            case 'asia'    : asia.setAttribute('style', 'display:block; opacity:0.5');
                             us.style.display   = 'none';
                             eur.style.display  = 'none';
                             eur_inactive.style.display  = 'block';
                             us_inactive.style.display = 'block';

Answer 1

如果您只是切换某些元素的显示（没有花哨的动画），您可以使用CSS来简化JavaScript代码。

我假设这样的html结构：

<div id="wrapper">
  ...
  <div id="eur">...</div>
  <div id="us">...</div>
  <div id="asia">...</div>

  <div id="eur_inactive">...</div>
  <div id="us_inactive">...</div>
  <div id="asia_inactive">...</div>
  ...
</div>

据我所知，有三个观点状态，即eur us asia，目前在switch声明中处理。

基于此，您可以在样式表中定义不同的视图状态，如下所示：

/* eur */
.viewstate-eur {
}

  .viewstate-eur #eur { display:block; opacity:0.5; }

  .viewstate-eur #us,
  .viewstate-eur #asia { display:none; }

  .viewstate-eur #us_inactive,
  .viewstate-eur #asia_inactive { display:block; }

/* us */
.viewstate-us {
}

  .viewstate-us #us { display:block; }

  .viewstate-us #eur,
  .viewstate-us #asia { display:none; }

  .viewstate-us #eur_inactive,
  .viewstate-us #asia_inactive { display:block; }

/* asia */
.viewstate-asia {
}

  .viewstate-asia #asia { display:block; opacity:0.5; }

  .viewstate-asia #us,
  .viewstate-asia #eur { display:none; }

  .viewstate-asia #us_inactive,
  .viewstate-asia #eur_inactive { display:block; }

您的javascript代码归结为通过className的{{1}}属性设置正确的视图状态。

div#wrapper

我总是喜欢在样式表中定义CSS样式，并使用// assuming tcode is one of eur, us, asia document.getElementById('wrapper').className = 'viewstate-' + tcode;或class属性分配它们，而不是直接通过javascript设置它们。使javascript代码更清晰，并将CSS放在它所属的位置（在样式表中）。不确定您的样式表是否因id属性而验证。

重构和评估

1 个答案: