javascript

Question

我正在尝试在我的页面上添加一个滑块，用于过滤特定 class 或特定 class table 的特定数字列。

我已尝试更正和修改许多现有的 ,example2 ... 但没有成功。

我使用 Zurb-Foundation slider。滑块现在可以使用，但它没有与我的页面的任何内容链接（根本没有用）。这是滑块的 HTML ；

<div class="large-9 columns">
   <div class="slider" data-slider data-initial-start="0.5" data-end="1" data-step="0.05" id="slider-filter">
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
    <span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns">
<input type="number" id="slider-number">
</div>

根据上面的基础文档和示例，这是我的 JS :

$(document).ready(function () {
$(function () {
    $("#slider-filter").slider({
        slide: function (event, ui) {
            // in this function we can define what happens when a user changes the sliders
            console.log("Slider is moving");
        }
    })
})

})

我在这部分已经失败了，检测我的滑块移动...我也根据文档尝试了这一行（var elem = new Foundation.Slider(element, options);）以便在 .slide() 中使用...没有成功。

Table 示例：

<table id="Table-to-filter">
 <tr>
   <td>First Column</td>
   <td>Second Column</td>
   <td>Third Column</td>
 </tr>
 <tr class="Prt">
   <td>XXXX</td>
   <td>23</td>
   <td>XXXX</td>
 </tr>
 <tr class="Chi-to-filter">
   <td>XXXX</td>
   <td>51</td>
   <td>XXXX</td>
 </tr>
 <tr class="Chi-to-filter">
   <td>XXXX</td>
   <td>77</td>
   <td>XXXX</td>
 </tr>
 <tr class="Prt">
   <td>XXXX</td>
   <td>215</td>
   <td>XXXX</td>
 </tr>
 <tr class="Chi-to-filter">
   <td>XXXX</td>
   <td>450</td>
   <td>XXXX</td>
 </tr>
  <tr class="Chi-to-filter">
   <td>XXXX</td>
   <td>450</td>
   <td>XXXX</td>
 </tr>

任何详细的帮助将不胜感激，以使用 Foundation 滑块解决此问题。

谢谢。

经过 Nowres Rafed 的回复：

FILTERING OF BIGDATA TABLE

经过多次尝试，这就是我能够做到的。我有关于我的代码的解释和问题。如您所见，我的 table 是用这种结构组织的，如果您单击箭头图标，它是一个可扩展的父行，它会提供许多子行。我想使用滑块来过滤父行和子行的 "Score" 列。我的分数存储在 "accordion menu" 上，而不是简单的 <td>。

我想知道是否有更好的方法来仅过滤 得分列？我使用了 row.cells 索引，它会改变速度以使用 row.cells 名称（即 "Score"）吗？你认为我使用正确的方法来访问我的分值吗，使用：$(colx.getElementsByClassName("accordion-title")).html();

此外，我将父行和子行的过滤分为两个不同的循环，是否可以改进这部分？

非常感谢您的帮助。

Answer 1

您以错误的方式初始化插件，您的代码中没有 jQuery 名为 slider 的插件。

这是您的案例的工作示例：

$(function() {
    var $filter = $('.slider');

    $filter.foundation();
    $filter.on('moved.zf.slider', function() {
      var slideValue = $('#sliderOutput1').val();

      // Do your filtering here
      console.log(slideValue);
    });
});

直播：https://codepen.io/anon/pen/VbYZgO

只需添加您的列过滤代码即可。

已编辑： 我想你可以让它更简单：https://codepen.io/anon/pen/Qvjqyo

在每个 accordion-title 上添加 score-value class，如果您想区分子行和父行，可以扩展示例...

javascript - 滑块过滤 table 数字列

javascript - Slider filtering table numeric column

html

jquery

slider

zurb-foundation