javascript - 检查数据属性和应用逻辑无法正常工作
问题描述
在每个 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>
解决方案
改变
if (availability == 'No') {
console.log(availability);
$('.catalogSmallCircle').hide();
}
到
if ($(this).data('availability') === 'no') {
console.log(availability);
$(this).find('.catalogSmallCircle').hide();
}
推荐阅读
- php - 如何从背包 laravel 中的 select2_from_ajax_multiple 中保存多个值
- docker - Jenkins 无法使用 unix 用户/组进行身份验证
- python - 如何使用 python 将 3D 云数据点转换为网格?
- r - 使用 fct_relevel 给出错误:`f` must be a factor (or character vector)
- r - 网页抓取和重塑数据
- javascript - Bootstrap 导航栏切换按钮不起作用
- flutter - Flutter 中 Vector 类的神秘属性
- python - python 属性设置器参数的类型注释应该是什么?
- sqlite - 烧瓶会话cookie
- node.js - 无法使用 express 获取我的实际公共 IP