我只是想
:创建尺寸表并添加可用(启用)的尺寸以替换尺寸表中的那些尺寸div。
展开:
我在div#hidden-shoe-sizes
下隐藏了从4到12的所有鞋子尺寸
然后我想使用prependTo
将信息从该div
附加到.swatches-select
div
然后,我想用.swatch-enabled
div(其中有重复项)替换前置内容。我正在使用.basel-tooltip-label
span
查找重复的项目。
我需要这样做的原因是,将具有.swatches-select
的{{1}}的{{1}}与用于我网站的div保持不受影响。
我不确定从哪里开始,因为我什至无法让重复的div的父母有背景。如果可以的话,也许我可以找出其余的。任何指导都将不胜感激!
请查看我的jsfiddle
CSS
.swatch-enabled
HTML
data-value
JQuery
.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; }
/* Hidden Sizes */
#hidden-shoe-sizes { display: none; }
答案 0 :(得分:0)
好吧,经过很多麻烦之后,我想出了一个可行的解决方案。我的下一个问题是,由于重复了很多jQuery代码,我该如何缩小它。
这是工作中的JSFiddle
有效的jQuery代码:
$('#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>
现在,我正在尝试缩小代码,使其不会如此重复:New question。