javascript - 查找选中标签的标题

Question

有点棘手，想知道是否有人有建议。

因此，我编写了一个脚本来查找在其父级上选择了类的任何标签，它会克隆它们并将它们附加到事件列表中，以便我创建一个“已过滤的元素”列表。

我想要做的是找到标签所属的每个部分的标题并将其附加到每个标签，所以如果它是从“尺寸”部分中选择的，我希望事件标签显示为“尺寸: S'，如果它来自“颜色”部分，则阅读“颜色:蓝色”。目前，我只能设法得到它，所以它会吐出所有标题，但无法将其缩小到正确的过滤器部分。

var filterItem = '.m-refinement-item',
  filterItemClick = filterItem + ' .js-button-apply';

function swipeyFilterBtns() {
  $(".content-stuff").before("<section class='swipeySizeFilter'></section>");

  var index = 1;
  var text_val = $('.m-refinement-item').find('.js-refinement-name').text();

  console.log(text_val);

  $(filterItem)
    .find('.selected label')
    .clone()
    .wrapInner('<span class="swipeyLabelText">' + text_val + ': </span>')
    .appendTo($('.swipeySizeFilter'));

  $('.swipeySizeFilter label').each(function() {
    $(this)
      .addClass('swipeyFilterLabel')
      .attr('data-position', index);
    index++;
  });
}

function swipeyFilterClicky() {
  $(".swipeyFilterLabel").click(
    function() {
      setTimeout(function() {
        $(".js-overlay.js-mobile-overlay.m-refine-by-button").click();
        $(filterItemClick).click();
        $(".js-apply-refinements").click();
      }, 400);
    });
}

function swipeyFilterActiveItems() {
  $('.input-checkbox').on('change', function() {
    $(this).add('label[for="' + this.id + '"]').toggleClass('NickTester').toggleClass('swipeyFilterBtnActive', this.checked);
  }).trigger('change');
}

function swipeyFilterSetup() {
  var swipeyFilterCheck = $('.swipeyWrapper');

  if (swipeyFilterCheck.length === 0) {
    $('.swipeyFilterLabel').wrapAll('<div class="swipeyWrapper"><div class="swipeyContainer"></div></div>');
    $('<span class="swipeyFilterActiveList"></span>').prependTo('.swipeyContainer');
    $('<div class="swipeyFilterOverlay"></div>').prependTo('.swipeySizeFilter');
  }

  $(function() {
    var swipeyScrollChecker = $('.swipeyWrapper');

    swipeyScrollChecker.scroll(function() {
      if (swipeyScrollChecker.scrollLeft() >
        (swipeyScrollChecker.width() -
          swipeyScrollChecker.width())) {
        $('.swipeyFilterOverlay').fadeOut(300);
      }
    });
  });

  if ($(".swipeyWrapper").prop('scrollWidth') === $(".swipeyWrapper").width()) {
    $('.swipeyFilterOverlay').hide();
  }
}

function swipeyFilterActiveItemsList() {
  $('.swipeyFilterLabel.swipeyFilterBtnActive').each(function() {
    $(this).prependTo($('.swipeyFilterActiveList'));
  });
  $(".swipeyFilterLabel.swipeyFilterBtnActive").sort(sort_li).appendTo('.swipeyFilterActiveList');

  function sort_li(a, b) {
    return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
  }

  if ($('.swipeyFilterActiveList').length) {
    $('<div class="swipeyFilterTitle">TESTER REFINED STYLES <span class="swipeyFilterCounter"></span>:</div>').prependTo('.swipeySizeFilter');
  }

  function swipeyFilterActiveCount() {
    var swipeyActiveCountNumber = $('.swipeyFilterActiveList .swipeyFilterBtnActive').length;
    $(".swipeyFilterCounter").html('(' + swipeyActiveCountNumber + ')');
  }
  setTimeout(swipeyFilterActiveCount, 100);
}

$(document).ready(function() {
  if ($('.selected').length >= 1) {
    swipeyFilterBtns();
    swipeyFilterClicky();
    swipeyFilterActiveItems();
    swipeyFilterSetup();
    swipeyFilterActiveItemsList();
  }
});

@media only screen and (min-width: 767px) {
  /* #Apple Device Scroll Fix
  –––––––––––––––––––––––––––––––––––––––––––– */
  * {
    -webkit-overflow-scrolling: touch;
  }
  .swipeySizeFilter {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
    position: relative;
  }
  .swipeyWrapper {
    cursor: pointer;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
  .swipeyContainer {
    font-size: 0;
    padding-left: 8px;
  }
  .swipeyFilterTitle {
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
    margin-left: 20px;
  }
  .swipeyFilterLabel {
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 14px;
    margin-left: 12px;
    max-height: 38px;
    min-width: 38px;
    padding: 12px 8px;
    text-align: center;
    vertical-align: top;
  }
  .swipeyFilterBtnActive {
    background: #000;
    color: #fff;
  }
  .m-label-inline .swipeyFilterBtnActive {
    background: #fff;
    color: #000;
  }
  .swipeyFilterBtnActive .swipeyLabelText:after {
    background: url('https://sb.monetate.net/img/1/422/2401995.png') no-repeat center;
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    margin-left: 12px;
    margin-right: 4px;
    position: relative;
    width: 10px;
  }
  .swipeyContainer>.swipeyFilterLabel:last-child {
    margin-right: 20px;
  }
  .swipeyFilterActiveList {
    display: inline-block;
    position: relative;
  }
  .swipeyFilterActiveList:after {
    background: #000;
    content: '';
    height: 38px;
    position: absolute;
    right: 0;
    width: 1px;
  }
  .swipeyWrapper::-webkit-scrollbar,
  .swipeyFilterActiveList:empty {
    display: none;
  }
  .swipeyFilterActiveList>.swipeyFilterLabel:last-child {
    margin-right: 14px;
  }
  .swipeyFilterOverlay {
    background: linear-gradient(to right, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 0.5) 10%, rgba(240, 240, 240, 0.85) 45%, rgba(240, 240, 240, 0.9) 85%);
    height: calc(100% - 2px);
    position: absolute;
    right: 0;
    top: 1px;
    width: 20px;
    z-index: 2;
  }
}


/* #Default Style Overrides
  –––––––––––––––––––––––––––––––––––––––––––– */

.pagination {
  margin-bottom: 0 !important;
}

.search-result-content {
  margin-top: 20px;
}


/* #iOS Devices
  –––––––––––––––––––––––––––––––––––––––––––– */

@supports (-webkit-overflow-scrolling: touch) {
  body {
    cursor: pointer;
  }
}


/* #Android Devices
  –––––––––––––––––––––––––––––––––––––––––––– */

@supports not (-webkit-overflow-scrolling: touch) {
  .swipeyLabelText {
    position: relative;
    top: -1px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content-stuff"></div>
<div class="js-refinement-mobile-table m-refinement-wrapper m-overlay">
  <div class="m-refinement-header">
    Refine by
  </div>
  <div class="js-mobile-overlay-refinements m-refinement-inner m-overlay">
    <ul class="m-refinement-list">
      <li class="js-mobile-overlay-refinement m-refinement-item">
        <span class="js-mobile-overlay-refinement-title m-refinement-title">
					<span class="js-refinement-name">Size</span>
        </span>
        <ul class="hidden js-mobile-overlay-refinement-values m-refinement-category m-overlay">
          <div class="m-refinement-fixed-height">
            <li class="selected m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" checked="checked" data-value="XS" title="Refine by Size: XS">
              <label for="XS">XS</label>
            </li>
            <li class="selected m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-name="size" data-value="S" checked="checked" title="Refine by Size: S">
              <label for="S">S</label>
            </li>
          </div>
        </ul>
      </li>
      <li class="js-mobile-overlay-refinement m-refinement-item">
        <span class="js-mobile-overlay-refinement-title m-refinement-title">
					<span class="js-refinement-name">Colour</span>
        </span>
        <ul class="hidden js-mobile-overlay-refinement-values m-refinement-category m-overlay">
          <div class="m-refinement-fixed-height">
            <li class="selected swatch-beige m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="Beige" name="Beige" checked="checked" data-value="Beige" title="Currently Refined by Colour: Beige">
              <label for="Beige">Beige</label>
            </li>
            <li class=" m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="Black" name="Black" data-name="color" data-value="Black" title="Refine by Colour: Black">
              <label for="Black">Black</label>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>

如果我没有以最好的方式解释这一点，我深表歉意，但在我的 Codepen 上可能更有意义:https://codepen.io/nickelse/pen/dyyEqzR

Answer 1

var filterItem = '.m-refinement-item',
  filterItemClick = filterItem + ' .js-button-apply';

function swipeyFilterBtns() {
  $(".content-stuff").before("<section class='swipeySizeFilter'></section>");

  var index = 1;
  var text_val = $('.m-refinement-item').find('.js-refinement-name').text();

  console.log(text_val);

  $(filterItem)
    .find('.selected label')
    .clone()
    .wrapInner('<span class="swipeyLabelText">' + text_val + ': </span>')
    .appendTo($('.swipeySizeFilter'));

  $('.swipeySizeFilter label').each(function() {
    $(this)
      .addClass('swipeyFilterLabel')
      .attr('data-position', index);
    index++;
  });
}

function swipeyFilterClicky() {
  $(".swipeyFilterLabel").click(
    function() {
      setTimeout(function() {
        $(".js-overlay.js-mobile-overlay.m-refine-by-button").click();
        $(filterItemClick).click();
        $(".js-apply-refinements").click();
      }, 400);
    });
}

function swipeyFilterActiveItems() {
  $('.input-checkbox').on('change', function() {
    $(this).add('label[for="' + this.id + '"]').toggleClass('NickTester').toggleClass('swipeyFilterBtnActive', this.checked);
  }).trigger('change');
}

function swipeyFilterSetup() {
  var swipeyFilterCheck = $('.swipeyWrapper');

  if (swipeyFilterCheck.length === 0) {
    $('.swipeyFilterLabel').wrapAll('<div class="swipeyWrapper"><div class="swipeyContainer"></div></div>');
    $('<span class="swipeyFilterActiveList"></span>').prependTo('.swipeyContainer');
    $('<div class="swipeyFilterOverlay"></div>').prependTo('.swipeySizeFilter');
  }

  $(function() {
    var swipeyScrollChecker = $('.swipeyWrapper');

    swipeyScrollChecker.scroll(function() {
      if (swipeyScrollChecker.scrollLeft() >
        (swipeyScrollChecker.width() -
          swipeyScrollChecker.width())) {
        $('.swipeyFilterOverlay').fadeOut(300);
      }
    });
  });

  if ($(".swipeyWrapper").prop('scrollWidth') === $(".swipeyWrapper").width()) {
    $('.swipeyFilterOverlay').hide();
  }
}

function swipeyFilterActiveItemsList() {
  $('.swipeyFilterLabel.swipeyFilterBtnActive').each(function() {
    $(this).prependTo($('.swipeyFilterActiveList'));
  });
  $(".swipeyFilterLabel.swipeyFilterBtnActive").sort(sort_li).appendTo('.swipeyFilterActiveList');

  function sort_li(a, b) {
    return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
  }

  if ($('.swipeyFilterActiveList').length) {
    $('<div class="swipeyFilterTitle">TESTER REFINED STYLES <span class="swipeyFilterCounter"></span>:</div>').prependTo('.swipeySizeFilter');
  }

  function swipeyFilterActiveCount() {
    var swipeyActiveCountNumber = $('.swipeyFilterActiveList .swipeyFilterBtnActive').length;
    $(".swipeyFilterCounter").html('(' + swipeyActiveCountNumber + ')');
  }
  setTimeout(swipeyFilterActiveCount, 100);
}

$(document).ready(function() {
  if ($('.selected').length >= 1) {
    swipeyFilterBtns();
    swipeyFilterClicky();
    swipeyFilterActiveItems();
    swipeyFilterSetup();
    swipeyFilterActiveItemsList();
  }
});

@media only screen and (min-width: 767px) {
  /* #Apple Device Scroll Fix
  –––––––––––––––––––––––––––––––––––––––––––– */
  * {
    -webkit-overflow-scrolling: touch;
  }
  .swipeySizeFilter {
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
    position: relative;
  }
  .swipeyWrapper {
    cursor: pointer;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
  .swipeyContainer {
    font-size: 0;
    padding-left: 8px;
  }
  .swipeyFilterTitle {
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
    margin-left: 20px;
  }
  .swipeyFilterLabel {
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 14px;
    margin-left: 12px;
    max-height: 38px;
    min-width: 38px;
    padding: 12px 8px;
    text-align: center;
    vertical-align: top;
  }
  .swipeyFilterBtnActive {
    background: #000;
    color: #fff;
  }
  .m-label-inline .swipeyFilterBtnActive {
    background: #fff;
    color: #000;
  }
  .swipeyFilterBtnActive .swipeyLabelText:after {
    background: url('https://sb.monetate.net/img/1/422/2401995.png') no-repeat center;
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    margin-left: 12px;
    margin-right: 4px;
    position: relative;
    width: 10px;
  }
  .swipeyContainer>.swipeyFilterLabel:last-child {
    margin-right: 20px;
  }
  .swipeyFilterActiveList {
    display: inline-block;
    position: relative;
  }
  .swipeyFilterActiveList:after {
    background: #000;
    content: '';
    height: 38px;
    position: absolute;
    right: 0;
    width: 1px;
  }
  .swipeyWrapper::-webkit-scrollbar,
  .swipeyFilterActiveList:empty {
    display: none;
  }
  .swipeyFilterActiveList>.swipeyFilterLabel:last-child {
    margin-right: 14px;
  }
  .swipeyFilterOverlay {
    background: linear-gradient(to right, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 0.5) 10%, rgba(240, 240, 240, 0.85) 45%, rgba(240, 240, 240, 0.9) 85%);
    height: calc(100% - 2px);
    position: absolute;
    right: 0;
    top: 1px;
    width: 20px;
    z-index: 2;
  }
}


/* #Default Style Overrides
  –––––––––––––––––––––––––––––––––––––––––––– */

.pagination {
  margin-bottom: 0 !important;
}

.search-result-content {
  margin-top: 20px;
}


/* #iOS Devices
  –––––––––––––––––––––––––––––––––––––––––––– */

@supports (-webkit-overflow-scrolling: touch) {
  body {
    cursor: pointer;
  }
}


/* #Android Devices
  –––––––––––––––––––––––––––––––––––––––––––– */

@supports not (-webkit-overflow-scrolling: touch) {
  .swipeyLabelText {
    position: relative;
    top: -1px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content-stuff"></div>
<div class="js-refinement-mobile-table m-refinement-wrapper m-overlay">
  <div class="m-refinement-header">
    Refine by
  </div>
  <div class="js-mobile-overlay-refinements m-refinement-inner m-overlay">
    <ul class="m-refinement-list">
      <li class="js-mobile-overlay-refinement m-refinement-item">
        <span class="js-mobile-overlay-refinement-title m-refinement-title">
					<span class="js-refinement-name">Size</span>
        </span>
        <ul class="hidden js-mobile-overlay-refinement-values m-refinement-category m-overlay">
          <div class="m-refinement-fixed-height">
            <li class="selected m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" checked="checked" data-value="XS" title="Refine by Size: XS">
              <label for="XS">XS</label>
            </li>
            <li class="selected m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-name="size" data-value="S" checked="checked" title="Refine by Size: S">
              <label for="S">S</label>
            </li>
          </div>
        </ul>
      </li>
      <li class="js-mobile-overlay-refinement m-refinement-item">
        <span class="js-mobile-overlay-refinement-title m-refinement-title">
					<span class="js-refinement-name">Colour</span>
        </span>
        <ul class="hidden js-mobile-overlay-refinement-values m-refinement-category m-overlay">
          <div class="m-refinement-fixed-height">
            <li class="selected swatch-beige m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="Beige" name="Beige" checked="checked" data-value="Beige" title="Currently Refined by Colour: Beige">
              <label for="Beige">Beige</label>
            </li>
            <li class=" m-label-inline">
              <input class="js-refinement-link input-checkbox" type="checkbox" id="Black" name="Black" data-name="color" data-value="Black" title="Refine by Colour: Black">
              <label for="Black">Black</label>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>