Question

我有以下脚本，功能齐全

HTML来源

<div id="filters">
    <button class="button is-checked" data-filter="*">show all</button>
    <button class="button" data-filter=".metal">metal</button>
    <button class="button" data-filter=".trans">trans</button>
</div>
<div id="container">
  <div class="mix metal trans"><h3 class="name">Mercury</h3></div>
  <div class="mix trans "><h3 class="name">Tellurium</h3></div>
  <div class="mix metal "><h3 class="name">Alminium</h3></div>
</div>

它适用于跟随JQuery而没有任何问题

$( function() {
  // init Isotope
  var $container = $('#container').isotope({
    itemSelector: '.mix',
    layoutMode: 'fitRows'
  });
  // filter functions
  var filterFns = {
  };
  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });
});

我想替换

<div id="filters">
    <button class="button is-checked" data-filter="*">show all</button>
    <button class="button" data-filter=".metal">metal</button>
    <button class="button" data-filter=".trans">trans</button>
</div>

带

<ul id="filters">
    <li><a href="#" class="filter is-checked" data-filter="*">All</a></li>
    <li><a href="#" class="filter" data-filter=".metal">metal</a></li>
    <li><a href="#" class="filter" data-filter=".trans">trans</a></li>
</ul>

由于某些原因，在我更换后它没有按预期工作。我想我在JQuery中跟随代码做错了。请支持我解决这个问题。

  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });

仅供参考：我正在为我的项目实施同位素代码。

Answer 1

问题是在单击功能中作为范围传递的按钮，将其删除并替换为正确的

$('#filters').on( 'click', '***button<-- change this***', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });

您在函数中发送的第二个参数是选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器为null或省略，则事件始终在到达所选元素时触发。

参考this

用超链接替换按钮，适合JQuery调用？

1 个答案: