代码之家 › 专栏 › 技术社区 › TheWebs

当数据属性不匹配时,隐藏元素的最佳方法是什么?

html jquery

TheWebs · 技术社区 · 6 年前

考虑以下事项:

jQuery('document').ready(function($) {
  $('#num-locations input[type="checkbox"]').on('click', function(e) {
    if (e.target.checked) {
      dataId = e.target.dataset.location;
      console.log(dataId);
      $('.jobs-listing [data-city]').not('[data-city*="'+dataId+'"]').hide();
    } else {
      $('.jobs-listing [data-city]').show();
    }
  });
});

下面是HTML的一个例子,可能有很多这样的例子:

<div class="manage-wrapper  d-flex py-5 eachJob" data-city="Ottawa" data-province="Ontario">
    <div class="manage-text w-7">
        <h4 class="font-weight-bold mt-0 mb-1 job-title"></h4>
        <p class="job-description"></p>
    </div>
    <div class="manage-aside text-right w-3">
        <h4 class="font-weight-bold mt-0 mb-1 job-location">Ottawa</h4>
        <p class="mb-0 job-province">Ontario</p>
        <a href="#" class="btn btn-primary job-url" tabindex="-1">VIEW JOB</a>
    </div>
</div>

预期 :在这种情况下,只对父级DIV应用DISPLAY NONE。 '.manage-wrapper'
实际 :页面上的所有内容都隐藏,因为“display:none”应用于 .manage-wrapper 但不适用于 管理包装器 这是自我。
单击所述复选框时没有控制台错误。

正确的应用方法是什么 : display: none 到任何带类的DIV manage-wrapper 单击时 data-location 不匹配 data-city ?

[和]

当您取消选中所说的复选框时,恢复“隐藏”元素的正确方法是什么?

1 回复 | 直到 6 年前

mbunch 6 年前

稍微简单一点,但应该让你去。

$('document').ready(function($) {
  $('#num-locations input[type=checkbox]').on('change', function() {
    $.each($('.manage-wrapper'), function(key, value) {
      if ($(value).data('location') != $(value).data('city')) {
        $(value).hide();
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num-locations">
  <input type="checkbox" />
</div>
<div class="manage-wrapper  d-flex py-5 eachJob" data-city="Ottawa" data-province="Ontario">
  <div class="manage-text w-7">
    <h4 class="font-weight-bold mt-0 mb-1 job-title"></h4>
    <p class="job-description"></p>
  </div>
  <div class="manage-aside text-right w-3">
    <h4 class="font-weight-bold mt-0 mb-1 job-location">Ottawa</h4>
    <p class="mb-0 job-province">Ontario</p>
    <a href="#" class="btn btn-primary job-url" tabindex="-1">VIEW JOB</a>
  </div>
</div>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前