jquery中的DOM閱讀

我正在嘗試做一個過濾器，它將顯示或隱藏<div>關於它們在其標籤中的data-type。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 => show difficulty_level : 1，所以我的腳本是「工作」，但我認爲這不可能導航槽DOM，但我不明白爲什麼。

來源

2013-08-20 Satblip

您試圖綁定一個'click'事件處理程序的元素剛點擊？那有什麼意義呢？另外：您正在調用'course_difficulty_level_filter'而不是將它傳遞給'$（this）.click'，所以綁定不起作用。如果你只是想調用'course_difficulty_level_filter'，那麼去掉'$（this）.click'部分。就目前而言，函數內部的'this'是指全局對象。如果它是一個事件處理程序，它會引用DOM元素，那麼爲全局對象或DOM元素分配「el」有什麼意義？ –

我覺得這段代碼的問題是：

this.el.closest('#courses_content')

的closest功能如何工作備份父母找到選擇器，但#courses_content不是#course_filter_level1的父項（值傳遞編輯爲el）。

嘗試改變這些引用僅僅是：

$('#courses_content')

應該沒有必要這個元素相對於在元件時，因爲我希望只有一個id爲courses_content DIV作爲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-20 14:33:18

你只是在尋找：

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

jQuery有查詢HTML attibutes豐富的支持：http://api.jquery.com/category/selectors/attribute-selectors/

來源

2013-08-20 14:26:05

克里斯哈迪有一個好點。上面的代碼是邊界不可讀的，我會推薦一個好的jQuery學習會話。 – zigo

jquery中的DOM閱讀

回答

相關問題