- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我如何缩小我的 jQuery 代码,因为它非常重复,我确信不需要这么长。
该代码完全符合我的需要,我只需要缩小以保持它看起来干净并使用更少的代码行。
非常感谢任何指导,对我的学习有帮助。
我想出了这个代码来回答我的 previous question .所以我正在学习感谢这个网站上的人。我只需要时不时地朝正确的方向轻推一下。 :-)
$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');
var sizefour = $('[data-value="4"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizefour) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="4"]'));
};
});
var sizefive = $('[data-value="5"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizefive) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="5"]'));
};
});
var sizefivehalf = $('[data-value="5 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizefivehalf) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="5 ½"]'));
};
});
var sizesix = $('[data-value="6"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizesix) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="6"]'));
};
});
var sizesixhalf = $('[data-value="6 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizesixhalf) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="6 ½"]'));
};
});
var sizeseven = $('[data-value="7"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizeseven) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="7"]'));
};
});
var sizesevenhalf = $('[data-value="7 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizesevenhalf) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="7 ½"]'));
};
});
var sizeeight = $('[data-value="8"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizeeight) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="8"]'));
};
});
var sizeeighthalf = $('[data-value="8 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizeeighthalf) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="8 ½"]'));
};
});
var sizenine = $('[data-value="9"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizenine) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="9"]'));
};
});
var sizeten = $('[data-value="10"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizeten) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="10"]'));
};
});
var sizeeleven = $('[data-value="11"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizeeleven) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="11"]'));
};
});
var sizetwelve = $('[data-value="12"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
if ($(this).text() == sizetwelve) {
$(this).closest('.swatch-disabled').replaceWith($('[data-value="12"]'));
};
});
.basel-tooltip-label {
display: none;
}
.swatch-size-large {
padding: 10px 10px;
border: 1px solid #ccc;
float: left;
margin-right: 4px;
}
.swatch-size-large.swatch-enabled {
border-color: green;
background: green;
color: white;
}
.blue {
background: blue !important;
}
.orange {
background: orange !important;
}
/* Hidden Sizes */
#hidden-shoe-sizes {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">
<div class="swatches-select" data-id="pa_size">
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-enabled" data-value="6 ½" style="">
<span class="basel-tooltip-label">6 ½</span>6 ½
</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-enabled" data-value="11" style="">
<span class="basel-tooltip-label">11</span>11
</div>
</div>
<div id="hidden-shoe-sizes">
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">4</span>4</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5</span>5</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5 ½</span>5 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6</span>6</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6 ½</span>6 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7</span>7</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7 ½</span>7 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8</span>8</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8 ½</span>8 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">9</span>9</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">10</span>10</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">11</span>11</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">12</span>12</div>
</div>
</div>
感谢一百万!
最佳答案
请注意,“缩小”通常是指在通过网络发送之前压缩代码的自动过程,例如将“var someLongVariableNameHere”替换为 var c
。很确定您正在寻找的是如何让您的代码更“干”(“不要重复自己”)。
您可以改用 dataValues
数组,将它们映射到与其关联的 div
和包含文本的数组,然后遍历 $( '.swatch-disabled .basel-tooltip-label')
一次,检查上面数组中该元素的文本索引,然后调用replaceWith
如果索引不是-1。
元素和文本被提前提取到数组中,以最大限度地减少计算复杂度,这不是必需的,但这是一件值得努力的事情,即使它需要付出代价几个字符的代码。 (如果你愿意,可以通过使用 Map
而不是使用 indexOf
来让它变得更好)
$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');
// while the following array declaration *could* be made a bit more DRY
// I think the code is clearest if all the options are listed out like this
const dataValues = [
'4',
'5',
'5 ½',
'6',
'6 ½',
'7',
'7 ½',
'8',
'8 ½',
'9',
'10',
'11',
'12'
];
const elms = dataValues.map(value => $(`[data-value="${value}"]`));
const texts = elms.map(elm => elm.find('span').text());
$('.swatch-disabled .basel-tooltip-label').each(function() {
const $this = $(this);
const i = texts.indexOf($this.text());
if (i !== -1) {
$this.closest('.swatch-disabled').replaceWith(elms[i]);
}
});
.basel-tooltip-label {
display: none;
}
.swatch-size-large {
padding: 10px 10px;
border: 1px solid #ccc;
float: left;
margin-right: 4px;
}
.swatch-size-large.swatch-enabled {
border-color: green;
background: green;
color: white;
}
.blue {
background: blue !important;
}
.orange {
background: orange !important;
}
/* Hidden Sizes */
#hidden-shoe-sizes {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">
<div class="swatches-select" data-id="pa_size">
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-enabled" data-value="6 ½" style="">
<span class="basel-tooltip-label">6 ½</span>6 ½
</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-enabled" data-value="11" style="">
<span class="basel-tooltip-label">11</span>11
</div>
</div>
<div id="hidden-shoe-sizes">
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">4</span>4</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5</span>5</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5 ½</span>5 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6</span>6</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6 ½</span>6 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7</span>7</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7 ½</span>7 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8</span>8</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8 ½</span>8 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">9</span>9</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">10</span>10</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">11</span>11</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">12</span>12</div>
</div>
</div>
关于javascript - 如何缩小我的重复文本等于并用代码替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53893900/
我尝试理解[c代码 -> 汇编]代码 void node::Check( data & _data1, vector& _data2) { -> push ebp -> mov ebp,esp ->
我需要在当前表单(代码)的上下文中运行文本文件中的代码。其中一项要求是让代码创建新控件并将其添加到当前窗体。 例如,在Form1.cs中: using System.Windows.Forms; ..
我有此 C++ 代码并将其转换为 C# (.net Framework 4) 代码。有没有人给我一些关于 malloc、free 和 sprintf 方法的提示? int monate = ee; d
我的网络服务器代码有问题 #include #include #include #include #include #include #include int
给定以下 html 代码,将列表中的第三个元素(即“美丽”一词)以斜体显示的 CSS 代码是什么?当然,我可以给这个元素一个 id 或一个 class,但 html 代码必须保持不变。谢谢
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
我试图制作一个宏来避免重复代码和注释。 我试过这个: #define GrowOnPage(any Page, any Component) Component.Width := Page.Surfa
我正在尝试将我的旧 C++ 代码“翻译”成头条新闻所暗示的 C# 代码。问题是我是 C# 中的新手,并不是所有的东西都像 C++ 中那样。在 C++ 中这些解决方案运行良好,但在 C# 中只是不能。我
在 Windows 10 上工作,R 语言的格式化程序似乎没有在 Visual Studio Code 中完成它的工作。我试过R support for Visual Studio Code和 R-T
我正在处理一些报告(计数),我必须获取不同参数的计数。非常简单但乏味。 一个参数的示例查询: qCountsEmployee = ( "select count(*) from %s wher
最近几天我尝试从 d00m 调试网络错误。我开始用尽想法/线索,我希望其他 SO 用户拥有可能有用的宝贵经验。我希望能够提供所有相关信息,但我个人无法控制服务器环境。 整个事情始于用户注意到我们应用程
我有一个 app.js 文件,其中包含如下 dojo amd 模式代码: require(["dojo/dom", ..], function(dom){ dom.byId('someId').i
我对“-gencode”语句中的“code=sm_X”选项有点困惑。 一个例子:NVCC 编译器选项有什么作用 -gencode arch=compute_13,code=sm_13 嵌入库中? 只有
我为我的表格使用 X-editable 框架。 但是我有一些问题。 $(document).ready(function() { $('.access').editable({
我一直在通过本教程学习 flask/python http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-wo
我想将 Vim 和 EMACS 用于 CNC、G 代码和 M 代码。 Vim 或 EMACS 是否有任何语法或模式来处理这种类型的代码? 最佳答案 一些快速搜索使我找到了 this vim 和 thi
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 想改进这个问题?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve this
这个问题在这里已经有了答案: Enabling markdown highlighting in Vim (5 个回答) 6年前关闭。 当我在 Vim 中编辑包含 Markdown 代码的 READM
我正在 Swift3 iOS 中开发视频应用程序。基本上我必须将视频 Assets 和音频与淡入淡出效果合并为一个并将其保存到 iPhone 画廊。为此,我使用以下方法: private func d
pipeline { agent any stages { stage('Build') { steps { e
我是一名优秀的程序员,十分优秀!