DOM元素的属性不同取决于选择器 - jQuery [英] Property of DOM element different depending on selector - jQuery

问题描述

所以我有一个 ul 的复选框，我想允许用户点击 li 选中/取消选中相应的复选框，然后通过javascript将更改应用于页面。注意，所有复选框开始检查。这是布局，不包括几个 li 元素。

So I have a ul of checkboxes and I want to allow users to click anywhere on the li elements to check/uncheck the corresponding checkbox, then apply the changes to the page via javascript. Note that all checkboxes start out checked. This is the layout, excluding a few more li elements.

<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来修改基于 code>属性的复选框。但是，根据我如何选择元素，我得到不同的值。我的函数看起来像这样

I then try use javascript to alter the page based on the checked property of the checkboxes. However, I'm getting different values based on how I select the elements. My function looks like this

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

A couple notes. First, color is inclusive (i.e. show it if it has that color) while shape is exclusive (i.e. don't show it if it has that shape) hence the slightly different logic. Second, .prop() function was returning the opposite values of what I was expecting hence the if (!$(checkbox).prop('checked'))

当我这样调用它时，它输出true

When I call it like this, it prints out true

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

但是当我这样调用它时，会输出false

but when I call it like this, it prints out false

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

我试图在JSFiddle中重现效果（ https://jsfiddle.net/eg9c4vkv/6/ ），但无法复制效果。我也认为它可能与console.log相关（当前状态下的console.log对象），但理论上，只要输入相同，函数的行为应该相同。

I tried to reproduce the effect in JSFiddle (https://jsfiddle.net/eg9c4vkv/6/) but was unable to duplicate the effect. I also thought it might be related to console.log (console.log object at current state) but theoretically the function should be behaving the same as long as the input is the same. Does anyone have any ideas?

推荐答案

我看到几个小问题，但没有什么明显。

I see a couple minor issues, but nothing obvious.

首先是访问数据属性的方式。第二个是如何绑定处理程序（你确定每次单击复选框的事件不会触发 .cat-check AND .filter-link ，这可能导致意想不到的行为）..无论哪种方式我重做的函数只是为了帮助。

First would be the way in which you're accessing the data attribute. Second is how you're binding handlers (are you sure each time you click the checkbox an event isn't fired for both .cat-check AND .filter-link, which could result in unexpected behavior).. either way I've redone the function just in case it helps.

通过在属性上包含 data - 前缀，您可以告诉jQuery在准备好时自动缓存值。

有关详情，请参阅jQuery数据文档

By including the data- prefix on the attribute, you're telling jQuery to cache the value automatically when it's ready.
Refer to jQuery data docs for more info

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

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

要访问数据，只需要使用键，在本例中为 filter 或键入。值得注意的是，您可以直接访问属性，而使用一个或另一个（最好 .data ）。

To access the data, you just need to use the key, which in this case would be filter or type. It's worth noting that you could access the attribute directly like you are, but use one or the other (preferably .data).

例如with markup ..

e.g. with markup..

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

尝试一下，我想我明白你想要做什么snippet应该为您工作）

Give this a try, I think I understand what it is you're trying to do (the below snippet should work for you)

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>

这篇关于DOM元素的属性不同取决于选择器 - jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！