Javascript jquery中的DOM读取

我正在尝试做一个过滤器，它将显示或隐藏标签中的

数据类型

以下是我的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=>显示难度\u级别：1，因此我的脚本“正常工作”，但我认为它无法在DOM中导航，但我找不到原因。
您只是在寻找：

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

jQuery对查询HTML属性有丰富的支持：
您只是在寻找：

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

jQuery对查询HTML属性有丰富的支持：
我认为这段代码就是问题所在：

this.el.closest('#courses_content')

该函数备份父级以查找选择器，但
#courses\u content
不是
#courseu filter\u level1
（作为
el
传入的值）的父级

尝试将这些引用更改为：

$('#courses_content')

应该不需要相对于传入元素查找此元素，因为我希望只有一个div的id
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");
    };
}

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

this.el.closest('#courses_content')

该函数备份父级以查找选择器，但
#courses\u content
不是
#courseu filter\u level1
（作为
el
传入的值）的父级

尝试将这些引用更改为：

$('#courses_content')

应该不需要相对于传入元素查找此元素，因为我希望只有一个div的id
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");
    };
}

您正在尝试将
单击
事件处理程序绑定到刚才单击的元素？这有什么意义？另外：您正在调用
课程\u难度\u级别\u过滤器
，而不是将其传递给
$（此）。单击
，因此绑定将不起作用。如果您只想调用
课程(难度)(级别)过滤器
,请执行此操作并删除
$（此）。单击
部分。当前情况下，
函数中的此
引用全局对象。如果它是一个事件处理程序，它将引用DOM元素，那么将
el
分配给全局对象或DOM元素有什么意义呢？您正在尝试将
click
事件处理程序绑定到刚才单击的元素？这有什么意义？另外：您正在调用
课程\u难度\u级别\u过滤器
，而不是将其传递给
$（此）。单击
，因此绑定将不起作用。如果您只想调用
课程(难度)(级别)过滤器
,请执行此操作并删除
$（此）。单击
部分。当前情况下，
函数中的此
引用全局对象。如果它是一个事件处理程序，它将引用DOM元素，那么将
el
分配给全局对象或DOM元素有什么意义呢？Chris Hardie有一个很好的观点。上面的代码几乎不可读，我推荐一个好的jQuery学习课程。上面的代码几乎不可读，我推荐一个好的jQuery学习课程。