如何缩小我的重复文本等于并用代码替换

Question

我如何缩小我的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>

万分感谢！

Answer 1

请注意，"minify" 通常指的是自动在通过网络发送之前压缩代码的过程，例如将 "var someLongVariableNameHere" 替换为 var c.很确定您正在寻找的是如何使您的代码更 "DRY" ("Don't Repeat Yourself").

您可以改用 dataValues 的数组，将它们映射到关联的 div 和包含文本的数组，然后遍历 $('.swatch-disabled .basel-tooltip-label') 一次，检查上面数组中该元素的文本索引，如果索引不是-1，则调用replaceWith。

提前将元素和文本提取到数组中，以最大限度地降低计算复杂度，这不是必需的，但这是一件值得努力的事情，即使它是以多写几个字符为代价的。（如果你愿意，可以使用 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>

Answer 2

我把你的 JavaScript 代码压缩成了这个！

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

var sizes = {
    "sizefour": '[data-value="4"]',
    "sizefive": '[data-value="5"]',
    "sizefivehalf": '[data-value="5 ½"]',
    "sizesix": '[data-value="6"]',
    "sizesixhalf": '[data-value="6 ½"]',
    "sizeseven": '[data-value="7"]',
    "sizesevenhalf": '[data-value="7 ½"]',
    "sizeeight": '[data-value="8"]',
    "sizeeighthalf": '[data-value="8 ½"]',
    "sizenine": '[data-value="9"]',
    "sizeten": '[data-value="10"]',
    "sizeeleven": '[data-value="11"]',
    "sizetwelve": '[data-value="12"]'
};

$('.swatch-disabled .basel-tooltip-label').each(function() {
    if ($(this).text() in sizes) {
        $(this).closest('.swatch-disabled').replaceWith($(sizes[$(this.text())]));
    };
});

希望这对您有所帮助！

Answer 3

您可以只使用 .each() 遍历所有 [data-value] 和 .filter() 以获得等于文本的那个

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

如何缩小我的重复文本等于并用代码替换

How to minify my repeating text equals and replacewith code

html

javascript

css

jquery

dry