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'))

当我这样打电话时，会打印出真实的

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

但是当我这样打电话时，会打印出错误的

$('.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属性的方式。其次是你如何绑定处理程序（你确定每次单击复选框时都不会因.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');

要访问数据，您只需使用密钥，在这种情况下，密钥为filter或type。值得注意的是，您可以直接访问该属性，但使用其中一个（最好是.data）。

e.g。与标记..

<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>

Answer 2

事实证明，如果单击复选框而不是a，则在调用方法之前将切换checked属性，从而在运行时期间提供不同的值。简单的解决方法是在单击a时触发复选框上的单击事件。

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

感谢@Kevin的帮助和比我最初开发的更优雅的解决方案。

DOM元素的属性根据selector-jQuery的不同而不同

2 个答案: