如何缩小我的重复文本等于和替换代码 [英] How to minify my repeating text equals and replacewith code

问题描述

如何缩小我的 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（$（这个）.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]'））;};}）;  

< pre class =snippet-code-css lang-css prettyprint-override> .basel-tooltip-label {display：none;}。swatch-size-large {padding：10px 10px; border：1px solid #ccc;向左飘浮; margin-right：4px;}。swatch-size-large.swatch-enabled {border-color：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-selectdata-id =pa_size> < div class =basel-swatch basel-tooltip text-only swatch-size-large swatch-enableddata-value =6½style => < span class =basel-tooltip-label>6½< / span>6½< / div> < div class =basel-swatch basel-tooltip text-only swatch-size-large swatch-enableddata-value =11style => < 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>  

万分感谢！

解决方案

你可以使用 .each（）来循环所有 [data-value] 和 .filter（）获取一个等于文本

  $（'＃hidden-shoe-sizes'）。contents（）。prependTo（'。swatches -select'）; $（'[data-value]'）。each（function（）{//循环遍历所有元素都有[data-value]属性var ThisEl = $（this）; // this element var ThisSize = ThisEl.find（'span'）。text（）; //获取span text $（'。swatch-disabled .basel-tooltip-label'）。filter（function（）{// filter this if this text == ThisSize return $（this）.text（）== ThisSize;}）。nearest（'。swatch-disabled'）。replaceWith（ThisEl）; // replace使用此元素}）;  

  .basel-tooltip-label {display：none; } .swatch-size-large {padding：10px 10px; border：1px solid #ccc;向左飘浮; margin-right：4px;}。swatch-size-large.swatch-enabled {border-color：green;背景：绿色; color：white;}。blue {background：blue！important; } .orange {背景：橙色！重要; } / *隐藏尺寸* /＃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-selectdata- ID = pa_size > < div class =basel-swatch basel-tooltip text-only swatch-size-large swatch-enableddata-value =6½style => < span class =basel-tooltip-label>6½< / span>6½< / div> < div class =basel-swatch basel-tooltip text-only swatch-size-large swatch-enableddata-value =11style => < 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>  

How do I minify my jQuery code as it's very repetitive and I'm sure doesn't need to be so long.

The code does exactly what I need it to do, I just need to minify to keep it looking clean and use less lines of code.

Any guidance is greatly appreciated and helps with my learning.

I came up with this code to answer my previous question. So I am learning thanks to the people on this site. I just need a little nudge in the right direction now and then. :-)

$('#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>

Thanks a million!

解决方案

You can just use .each() to loop through all [data-value] and .filter() to get the one equal the text

$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');

$('[data-value]').each(function(){            // loop through all element has a [data-value] attribute
  var ThisEl = $(this);                       // this element
  var ThisSize = ThisEl.find('span').text();  // get span text
  $('.swatch-disabled .basel-tooltip-label').filter(function(){   // filter if this text == ThisSize
     return $(this).text() == ThisSize;
  }).closest('.swatch-disabled').replaceWith(ThisEl);  // replace with this element
});

.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>

这篇关于如何缩小我的重复文本等于和替换代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！