0

我正在尝试做一个过滤器来显示或隐藏他们在标签中的<div>内容。data-type

这是我的 Javascript ：

var course_difficulty_level_filter= function(el,level) 
  {
    this.el = el;
    this.el.closest('#courses_content').find("div").hide();
    if(level != "00"){
      this.el.closest('#courses_content').find('div[data-difficulty="'+level+'"]').show();
      console.log("show difficulty_level : "+ level);
    } else {
      this.el.closest('#courses_content').find("div").show();
      console.log("show difficulty_level : all");
    };
  }

$('#course_filter_level1').click(function(){

  $(this).click(course_difficulty_level_filter($(this),"1"));

});

这是我的 HTML：

<div id="coursefilter">
    <div id="coursefilter_content" class="hide">

        <div id="coursefilter_content_text">
            <div id="course_filter_level_text"><p class="course_filter">Level: </p></div>       
        </div>

        <div id="coursefilter_content_icons">
            <div id="course_filter_level">
                <div id="course_filter_level1" class="opacityquarter"> 
                    <div id="level1_rectangle1"></div>
                    <div id="level1_rectangle2"></div>
                    <div id="level1_rectangle3"></div>
                    <div id="level1_rectangle4"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Courses - Course Overviews-->
<div id="courses">
    <div id="courses_content" class="hide">
        <div class="course_overview_content_even" data-difficulty="1" data-lang="en"></div>
    </div>
</div>

我成功获得了console.log => show difficulty_level : 1，所以我的脚本正在“工作”，但我认为它无法通过 DOM 导航，但我不知道为什么。

4

2 回答 2

3

您是否只是在寻找：

$('div[data-difficulty="'+level+'"]').show();
$('div[data-difficulty="'+level+'"]').hide();

jQuery对查询HTML属性有丰富的支持：http: //api.jquery.com/category/selectors/attribute-selectors/

于 2013-08-20T14:26:05.870 回答
1

我认为这段代码是问题所在：

this.el.closest('#courses_content')

最接近的函数会备份父项以查找选择器，但#courses_content不是#course_filter_level1（作为 传入的值el）的父项。

尝试将这些引用更改为：

$('#courses_content')

应该没有必要找到相对于传入元素的这个元素，因为我希望只有一个带有 id 的 div，courses_content因为 ID 在文档中应该是唯一的。

整个函数可以改成这样：

// removed el, so it must be removed from the calling function
var course_difficulty_level_filter= function(level) 
{
    var coursesContent = $('#courses_content');
    coursesContent.find("div").hide();
    if(level != "00"){
        coursesContent.find('div[data-difficulty="'+level+'"]').show();
        console.log("show difficulty_level : "+ level);
    } else {
        coursesContent.find("div").show();
        console.log("show difficulty_level : all");
    };
}
于 2013-08-20T14:33:18.167 回答