Проверка атрибута данных и применение логики не работает

Question

В каждом div - smallCatalogBlock, у меня есть данные, названные data-availability с «Да» или «Нет». Я пытаюсь проверить значение атрибута данных. Если это не так, я хочу catalogSmallCircle, специально для того, чтобы этот div был скрыт.

Пока ничего не происходит.

Кто-нибудь видит, что я делаю не так? Исходя из того, что я пытаюсь сделать, кнопки «Технология крепления» должны быть скрыты.

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>

Answer 1

похоже, что ваша переменная доступности находится за пределами каждого цикла. Вместо этого он должен обрабатываться как атрибут данных fill-specs.

Answer 2

Изменение

    if (availability == 'No') {
        console.log(availability);
        $('.catalogSmallCircle').hide();
    }

до

if ($(this).data('availability') === 'no') {
        console.log(availability);
         $(this).find('.catalogSmallCircle').hide();
}