目标:通过实现可重用的 JS(或 ASP？)消除初始 DOM 中的冗余。
在这个例子中，我想写一些 JS 来将 div @id loc-A 的内容“bump”到 div @id loc-B，而不必在页面的两个地方编写完全相同的代码。
我只是不确定从哪里开始......？
我已经能够使用 CSS 轻松完成此操作，但代码冗余。 div 元素包含的内容越多，加载的时间就越长。
这是我的代码笔示例:
看笔redundant_panda通过罗沙夫 ( @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>
最佳答案
我觉得这里面缺少了一些东西，但我将如何解决所提供的代码。
@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。
您还可以通过响应式框架(bootstrap、foundation)或多种不同的方式来解决这个问题。我认为更好的方法是考虑你正在解决什么问题以及你是如何解决它的。如果您发现自己反复使用相同的代码，那么也许您需要重新审视您的方法。
关于javascript - 将共享的 'code_block' 从 loc-A 移动到 loc-B，只有一个 'code_block' 的写入实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35946972/