Display div value that matches with attribute from other div

Question

I have two divs created from PHP loop:

These divs has parent div called attributes.

sku-value and size-value have something in common: data-id attribute.

With CSS I'm manipulating the sku-value spans:

.sku-value {
  display:none;
} 

.sku-value.active {
   display:inline-block;
 }

With jQuery I'm displaying only the first size-value:

$('.sku-value:first').addClass('active');

So in this case when the page is loaded only this sku-value will be visible:

With my code bellow I can successfully change the active class of each clicked size-value but how can I change the displayed sku-value that matches the data-id value?

For example: if a user click on one of size-value that has data-id 152, how can I display the sku-value that has data-id 152 and hide the current visible sku-value?

  $(document).ready(function(){
    $('.sku-value:first').addClass('active');

    $('.attributes').find('.size-value').on('click', function(){

      if ($this.hasClass('active')) {
        $this.removeClass('active');
      } else {
        $this.closest('.size-values').find('.size-value').removeClass('active');
        $this.addClass('active');
      }

    });
  });

user_519413 · Answer

To achieve what you require you can retrieve the data-id of the clicked element, then use filter() to retrieve all elements by that data attribute before setting the active class on them.

Here's an example showing how to do that, and also some tweaks to the logic to make it more succinct:

$(document).ready(function() {
  let $skuAttributes = $('.sku-value');
  let $sizeAttributes = $('.size-value');
  let $allAttributes = $skuAttributes.add($sizeAttributes);
  
  // set default state on page load
  $skuAttributes.first().addClass('active');
  $sizeAttributes.first().addClass('active');

  // on click of a size attribute, set active class on all relevant elements
  $sizeAttributes.on('click', function() {
    $sizeAttributes.removeClass('active');
    
    let dataId = $(this).data('id'); 
    $allAttributes.removeClass('active').filter((i, el) => el.dataset.id == dataId).addClass('active');
  });
});

div { font-size: 1.3em; }
.sku-value { display: none; }
.sku-value.active { display: inline-block; }
.active { color: #C00; }

user_8223070 · Answer

Here's a functional-style, vanilla-flavored solution I came up with. Several helper functions share the heavy lifting, so the main listener function stays simple and clean.

Instead of the active class, this uses a hidden class that can apply to sku spans as well as size spans.

(I'm late to the party because I wrote this script while I was offline today.)

const
  // Collects DOM elements as arrays
  sizes = [...document.getElementsByClassName("size-value")],
  skus  = [...document.getElementsByClassName("sku-value")],
  spans = [...sizes, ...skus],

  // Defines helper functions
  isHidden = (_this) => _this.classList.contains("hidden"),
  isActive = (_this) => sizes.every((size) => isHidden(size) || size === _this),
  showAll = (_these) => _these.forEach((_this) => _this.classList.remove("hidden")),
  hideAll = (_these) => _these.forEach((_this) => _this.classList.add("hidden")),
  filterByDataId = (_these, id) => _these.filter(_this => _this.dataset.id === id);

// Invokes listener when user clicks a size
sizes.forEach(size => size.addEventListener("click", hideAndShow));

// Defines listener
function hideAndShow({target}){ // Destructures click event
  if(isActive(target)){
    showAll(spans);
  }
  else{
    hideAll(spans);
    showAll(filterByDataId(spans, target.dataset.id));
  }
}

div { margin: 1em 0; }
span { padding: 0.1em 0.3em; border: 1px solid grey; }
.hidden{ display: none; }


    1000
    2000
    3000
  
  
    Medium
    Large
    Xtra Large

Display div value that matches with attribute from other div

2 Answers