javascript - DOM 元素的属性根据选择器的不同而不同 - jQuery

Question

所以我有一个 ul 复选框，我希望允许用户单击 li 元素上的任意位置来选中/取消选中相应的复选框，然后将更改应用到通过 JavaScript 的页面。请注意，所有复选框一开始都是选中的。这是布局，不包括一些 li 元素。

<ul class="dropdown-menu">
    <li class="cat-header">
        <strong>Category</strong>
    </li>
    <li>
        <a class="filter-link"> Red
            <input checked="true" class="cat-check" data-filter="red" data-type="color" type="Checkbox">
        </a>
    </li>

然后，我尝试使用 javascript 根据复选框的 checked 属性更改页面。但是，根据我选择元素的方式，我得到了不同的值。我的函数看起来像这样

setFilter = function(checkbox) {
  console.log(checkbox);
  if ($(checkbox).attr('data-type') === "color") {
    if (!$(checkbox).prop('checked')) {
      $(checkbox).prop('checked', false);
      colorFilter = colorFilter.replace($(checkbox).attr('data-filter') + " ", "");
    } else {
      $(checkbox).prop('checked', true);
      colorFilter = colorFilter + $(checkbox).attr('data-filter') + " ";
    }
  } else if ($(checkbox).attr('data-type') === "shape") {
    if (!$(checkbox).prop('checked')) {
      $(checkbox).prop('checked', false);
      shapeFilter = shapeFilter + $(checkbox).attr('data-filter') + " ";
    } else {
      $(checkbox).prop('checked', true);
      shapeFilter = shapeFilter.replace($(checkbox).attr('data-filter') + " ", "");
    }
  }
}; 

一些注释。首先，颜色是包容性的(即，如果它具有该颜色，则显示它)，而形状是排他性的(即，如果它具有该形状，则不显示它)，因此逻辑略有不同。其次， .prop() 函数返回与我预期相反的值，因此 if (!$(checkbox).prop('checked'))

当我这样调用它时，它会打印出 true

$('.filter-link').click(function(e) { 
    setFilter($(this).children("input")[0]);
  });

但是当我这样调用它时，它打印出 false

$('.cat-check').click(function(e) {
    setFilter($(this)[0]);
  });

我尝试在 JSFiddle ( https://jsfiddle.net/eg9c4vkv/6/ ) 中重现该效果，但无法复制该效果。我还认为它可能与 console.log ( How can I change the default behavior of console.log? (*Error console in safari, no add-on*) ) 有关，但理论上只要输入相同，该函数的行为就应该相同。有人有什么想法吗？

Answer 1

我发现了一些小问题，但没有什么明显的问题。

首先是您访问 data 的方式属性。其次是如何绑定(bind)处理程序(您确定每次单击该复选框时都不会触发 .cat-check 和 .filter-link 的事件，这可能会导致意外的行为)..无论哪种方式，我都重做了功能以防万一有帮助。

通过包含 data-属性上的前缀，您告诉 jQuery 在准备好时自动缓存该值。
Refer to jQuery data docs for more info

<a href="" data-filter="hello">Hello</a>

相当于

$('a').data('filter', 'hello');

要访问数据，您只需使用 key ，在本例中为 filter或type 。值得注意的是，您可以像现在一样直接访问该属性，但使用其中之一(最好是 .data )。

例如带标记..

<a href="" data-filter="hello">Hello</a>

$('a').on('click', function(e) { 
    var $this = $(this);
    $this.data('filter', 'I changed');
    //what will the value be?  It's going to be 'Hello', because we're accessing the attribute in the DOM
    alert($this.attr('data-filter'));

    //what will the value be?  It's going to be 'I changed', because we're accessing the data cache
    alert($this.data('filter'));
});

尝试一下，我想我明白你想要做什么(下面的代码片段应该适合你)

var colorFilter = 'red green yellow ';

$('.dropdown-menu')
  .on('click', 'li', function(e) {
  	//check the source of the event, if the checkbox was already clicked then let it continue
    if (e.target.type != "checkbox") {
      $(this).find(".cat-check").click();
    }
  })
  .on('click', '.cat-check', function() {
    console.log(this);
    var $checkbox = $(this),
      type = $checkbox.data('type'),
      filter = $checkbox.data('filter'),
      isChecked = $checkbox.prop('checked');
    console.log(isChecked);
    if (type === "color") {
      if (isChecked) {
        if (colorFilter.indexOf(filter) < 0) {
          colorFilter = colorFilter + filter + " ";
        }
      } else {
        colorFilter = colorFilter.replace(filter + " ", "");
      }
      $('#filter').text(colorFilter);
    } else if (type === "shape") {
      if (isChecked) {
        if (colorFilter.indexOf(filter) < 0) {
          shapeFilter = shapeFilter + filter + " ";
        }
      } else {
        shapeFilter = shapeFilter.replace(filter + " ", "");
      }
      console.log(shapeFilter);
    }
  });

li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id='filter'>
  red green yellow
</div>
<ul class="dropdown-menu">
  <li class="cat-header">
    <strong>Category</strong>
  </li>
  <li>
    <a class="filter-link"> Red
            <input checked="true" class="cat-check" data-filter="red" data-type="color" type="Checkbox">
        </a>
  </li>
  <li>
    <a class="filter-link"> Green
            <input checked="true" class="cat-check" data-filter="green" data-type="color" type="Checkbox">
        </a>
  </li>
  <li>
    <a class="filter-link"> Yellow
            <input checked="true" class="cat-check" data-filter="yellow" data-type="color" type="Checkbox">
        </a>
  </li>
</ul>