lundi 7 janvier 2019

Checking a data-attribute and applying logic is failing to work

In each div - smallCatalogBlock, I have a data attributed called data-availability with either a 'Yes' or 'No'. I am attempting to check the value of the data attribute. If it is no, I am wanting the catalogSmallCircle, specifically for that div to be hidden.

So far, nothing is happening.

Does anyone see what I am doing wrong? Based on what I am attempting, the buttons for "Fastening Technology" should be hidden.

var availability = $('.smallCatalogBlock').data('availability');
$('.smallCatalogBlock').each(function(index, catalogBlock){
                catalogName = $(catalogBlock).data('fill-specs');
                console.log('catalog name ' + catalogName);
                if (availability == 'No') {
                        console.log(availability);
                        $('.catalogSmallCircle').hide();
                }
                //Filling Circle
                $('.catalogSmallCircle', catalogBlock).html(
                        '<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose"></div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="'+ catalogName +'">Request</button></div></div>'
                )
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
  <div class="smallCatalogBlock" data-fill-specs="Profile-Catalog" data-availability="Yes">
    <span class="smallCatalogTitle">Profiles and Caps</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div><div class="smallCatalogBlock comingSoonSmall" data-fill-specs="Fastening Technology" data-availability="No">
    <span class="smallCatalogTitle">Fastening Technology</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div>
</div>

Aucun commentaire:

Enregistrer un commentaire