Question

在下面的代码中，我得到了变量undefined和min的{{1}}：

max

$(".filters-button-group").on("click", "input", function() {
  var min = $(this).find(".filter").attr("data-filter-price-range-min");
  var max = $(this).find(".filter").attr("data-filter-price-range-max");
  var filter_min = $(this).attr("data-filter-min");
  var filter_max = $(this).attr("data-filter-max");
  console.log(min);
  console.log(max);
  console.log(filter_min);
  console.log(filter_max);
});

我为什么可以访问数据属性<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main> <div> <form> <p>Price Range</p> <ul class="filters-button-group"> <li> <input data-filter="filter-price-range" data-filter-max="650" data-filter-min="300" id="price-range-300-650" type="radio"> <label for="price-range-300-650">300 - 650</label> </li> </ul> </form> <span class="filter" data-filter-price-range-min="350" data-filter-price-range-max="450"></span> </div> </main>和data-filter-min的值，但不能访问data-filter-max和data-filter-price-range-min的值？

Answer 1

您只能使用.data()方法来获取data attribute，我也使用了.parents()，.next()导航到.filter元素，这是一个有效的代码段：

$(".filters-button-group").on("click", "input", function() {
  var min = $(this).parents('form').next().data("filter-price-range-min");
  var max = $(this).parents('form').next().data("filter-price-range-max");
  var filter_min = $(this).data("filter-min");
  var filter_max = $(this).data("filter-max");
  console.log(min);
  console.log(max);
  console.log(filter_min);
  console.log(filter_max);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div>
    <form>
      <p>Price Range</p>
      <ul class="filters-button-group">
        <li>
          <input data-filter="filter-price-range" data-filter-max="650" data-filter-min="300" id="price-range-300-650" type="radio">
          <label for="price-range-300-650">300 - 650</label>
        </li>
      </ul>
    </form>
    <span class="filter" data-filter-price-range-min="350" data-filter-price-range-max="450"></span>
  </div>
</main>

Answer 2

您的代码this中的

是input中的ul 在span内搜索类为filter的{{1}}不会找到结果，因为input在span之外。

Answer 3

快速解答：在当前代码中，您需要在以下两行中添加.closest("form").parent()：

var min = $(this).closest("form").parent().find(".filter").attr("data-filter-price-range-min");
var max = $(this).closest("form").parent().find(".filter").attr("data-filter-price-range-max");

说明：

您正在“ .filters-button-group”内的“输入”中寻找“ click”事件。执行函数时，this指向input元素，而$(this).find(".filter")则使用此类查找输入的后代，但是HTML中没有输入的后代元素，因此结果为空，因此在使用undefined之后为.attr()。

但是，请注意，具有“ filter”类的元素在表单的同级中。从输入开始，我们将返回最接近的“表单”，然后返回其父级“ div”，最后为带有“过滤器”类的元素运行.find()。

jQuery-无法访问某些属性？

3 个答案: