Question

目标：通过实现可重用的JS（或ASP？）来消除初始DOM中的冗余。

在这个例子中，我想编写一些JS来将div @ id loc-A的内容“颠覆”到div @ id loc-B，而不必在页面上的两个位置写入完全相同的代码。

我只是不确定从哪里开始......？

我已经能够很容易地用CSS实现这一点，但是使用冗余代码。 div元素包含的越多，负载就越长。

这是我的代码集示例：

请在redundant_panda上通过rorschaff（@rorschaff）查看笔CodePen。

<html>
<head>
<style>
@media screen and (min-width: 861px) {
  div[id^="loc"] img {
    width: 100%;
  }
  #loc-A {
    display: initial;
  }
  #loc-B {
    display: none;
  }
}

@media screen and (max-width: 860px) {
  div[id^="loc"] img {
    width: 50%;
  }
  #loc-A {
    display: none;
  }
  #loc-B {
    position: relative;
    top: 250px;
    display: initial;
  }
}
</style>
</head>


<body>

<div id="loc-A">
<img src="http://bit.ly/1TAzmvg"/>
</div>

<!----- Down the page somewhere ----->

<div id="loc-B">
<img src="http://bit.ly/1TAzmvg" />
</div>

</body>
</html>

Answer 1

我觉得这里缺少一些东西，但这是我如何解决所提供的代码。

@media screen and (min-width: 861px) {
  div[id^="loc"] img {
    width: 100%;
  }
}

@media screen and (max-width: 860px) {
  div[id^="loc"] img {
    width: 50%;
  }
  #loc-A {
    position: relative;
    top: 250px;
  }
}

#loca-A {
   display: initial;
}

然后摆脱另一个div。

您还可以通过响应式框架（引导程序，基础）或实际上以多种不同方式解决此问题。我认为更好的方法是考虑你正在解决的问题以及你如何解决它。如果您发现自己反复使用相同的代码，那么可能需要重新审视您的方法。

将共享的'code_block'从loc-A移动到loc-B，只有一个'code_block'

1 个答案: