Question

所以我要做的就是更新＆＃39; topic＆＃39;选择基于＆＃39; category＆＃39;用户选择了。我想要做的是观察属性的变化事件＆＃39; data-curr_filter＆＃39;在ID为＆＃39; category-filter＆＃39;的元素上。我的每个类别的jQuery都通过web-inspector进行测试，因此我认为它与函数的.on('change')部分有关（它不会触发console.log）。代码如下：

搜索过滤器的HTML：

<span id="category-filter" class="filter-select" data-target="filter_categories" data-curr_filter="all">
  All Categories &nbsp; <i class="fa fa-angle-down"></i></span>
filter by
<span class="filter-select" data-target="filter_topics">
  All Topics &nbsp; <i class="fa fa-angle-down"></i>
</span>

＆＃39;主题的HTML＆＃39;：

<ul class="filter-list" id="filter_topics" aria-labelledby="filter_topics">
    <li data-val="affordability" data-cat="communities">Affordability</li>
    <li data-val="market_conditions" data-cat="communities">Market Conditions</li>

jQuery：

$(document).ready(function() {
  console.log("Hello Moto");
  $(document).on('change', '#category-filter', function() {

  console.log("Something change");

  if ($('#category-filter').attr('data-curr_filter') == 'all' ){
    $('#filter_topics li').show();
  }  

  if ($('#category-filter').attr('data-curr_filter') == 'communities'){
    //show all topics as a "blank slate" before altering the display elements according category
    $('#filter_topics li').show();
    //hide all the elements
    $('#filter_topics li').toggle();
    //show only the topics labeled with communities
    $('#filter_topics li[data-cat=communities').toggle();    
  } 
  ...

Answer 1

解答：

只是做一个onclick作品......有点恼火，我完全忽视了这一点。

 $(document).on('click', '#filter_categories li', function() {
    var selectedCategory = $(this).attr('data-val');

    if (selectedCategory == 'all' ){
      $('#filter_topics li').show();
    }

    if (selectedCategory == 'communities'){
        //show all topics as a "blank slate" before altering the display elements according category
        $('#filter_topics li').show();
        //hide all the elements
        $('#filter_topics li').toggle();
        //show only the topics labeled with communities
        $('#filter_topics li[data-cat=communities').toggle();    
      }
...

TL; DR问题：

由于它是<span>而不是<input>，<select>或<textarea>元素，因此它没有.on（'change'）事件观察程序。如果我想出答案，我会在这里发布。

Answer 2

试试这个：

  //$(document).ready(function() {
    $(function() {

  console.log("Hello Moto");

  //$(document).on('change', '#category-filter[data-curr_filter]', function() {
  $('#category-filter').change(function() {

    console.log("Something change");

    if ($('#category-filter').attr('data-curr_filter') == 'all') {
      $('#filter_topics li').show();
    }

    if ($('#category-filter').attr('data-curr_filter') == 'communities') {
      //show all topics as a "blank slate" before altering the display elements according category
      $('#filter_topics li').show();
      //hide all the elements
      $('#filter_topics li').toggle();
      //show only the topics labeled with communities
      $('#filter_topics li[data-cat=communities').toggle();
    } 
    ...`

on（＆＃39;更改＆＃39;）功能不起作用

2 个答案: