jquery div和类选择器

时间：2011-12-29 23:23:08

标签： jquery class css-selectors

这是一个jsFiddle 1，这是我的代码和PHP：

<div id="" class="menu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/">Αρχική</a>

</div><div class="menu_more" id="">

</div>

<div id="events" class="menu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/events">Εκδηλώσεις-Νέα</a>

</div><div class="menu_more" id="events">

<div id="educational_events" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/events/educational_events">Εκπαιδευτικές Εκδηλώσεις</a>

</div><div class="submenu_more" id="educational_events">

</div>

<div id="announcements" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/events/announcements">Ανακοινώσεις</a>

</div><div class="submenu_more" id="announcements">

</div>

<div id="party" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/events/party">Party-Χοροί</a>

</div><div class="submenu_more" id="party">

</div>

<div id="various" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/events/various">Λοιπές δραστηριότητες</a>

</div><div class="submenu_more" id="various">

</div></div>

<div id="proposals" class="menu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/proposals">Προτάσεις</a>

</div><div class="menu_more" id="proposals">

<div id="dap_hmmy" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/proposals/dap_hmmy">Προτάσεις ΔΑΠ-ΝΔΦΚ ΗΜΜΥ</a>

</div><div class="submenu_more" id="dap_hmmy">

</div>

<div id="dap_emp" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/proposals/dap_emp">Προτάσεις ΔΑΠ-ΝΔΦΚ ΕΜΠ</a>

</div><div class="submenu_more" id="dap_emp">

</div>

<div id="dap_aei" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/proposals/dap_aei">Προτάσεις ΔΑΠ-ΝΔΦΚ ΑΕΙ</a>

</div><div class="submenu_more" id="dap_aei">

</div></div>

<div id="lessons" class="menu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/lessons">Μαθήματα</a>

</div><div class="menu_more" id="lessons">

<div id="1_semester" class="submenu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/lessons/1_semester/">1<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="1_semester">

<a href="/lessons/1_semester/games.html">O titlos tou arthrou</a></div>

<div id="2_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/2_semester">2<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="2_semester">

</div>
 <div id="3_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/3_semester">3<sup>o</sup> εξάμηνο</a>
</div><div class="submenu_more" id="3_semester"> 
</div>
<div id="4_semester" class="submenu">
<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/4_semester">4<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="4_semester">

</div>

<div id="5_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/5_semester">5<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="5_semester">

</div>

<div id="courses_flows" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/lessons/courses_flows">Μαθήματα ροών</a>

</div><div class="submenu_more" id="courses_flows">
    </div></div>
  </div><div style="float:right;width:325px;overflow:hidden;"><div id="notes" class="menu">
    <img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/notes">Σημειώσεις-Παλιά Θέματα</a>
    </div><div class="menu_more" id="notes">
    <div id="1_semester" class="submenu">
    <img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/1_semester">1<sup>o</sup> εξάμηνο</a>
    </div><div class="submenu_more" id="1_semester">
    </div>
    <div id="2_semester" class="submenu">
    <img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/2_semester">2<sup>o</sup> εξάμηνο</a>
    </div><div class="submenu_more" id="2_semester">
    </div>

<div id="3_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/3_semester">3<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="3_semester">

</div>

<div id="4_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/4_semester">4<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="4_semester">

</div>

<div id="5_semester" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/5_semester">5<sup>o</sup> εξάμηνο</a>

</div><div class="submenu_more" id="5_semester">

</div>

<div id="courses_flows" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/notes/courses_flows">Μαθήματα ροών</a>

</div><div class="submenu_more" id="courses_flows">

</div></div>

<div id="radio" class="menu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/radio">Radio</a>

</div><div class="menu_more" id="radio">

</div>

<div id="contact" class="menu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/contact">Επικοινωνία</a>

</div><div class="menu_more" id="contact">

</div>

<div id="services" class="menu">

<img align="absmiddle" src="http://dap.ntua.gr/el/img/minus.png" /><a href="/services">Υπηρεσίες</a>

</div><div class="menu_more" id="services">

<div id="terms_of_use" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/services/terms_of_use">Όροι χρήσης</a>

</div><div class="submenu_more" id="terms_of_use">

</div>

<div id="privacy" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/services/privacy">Προσωπικό απόρρητο</a>

</div><div class="submenu_more" id="privacy">

</div>

<div id="statistics" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/services/statistics">Στατιστικά Ιστοτόπου</a>

</div><div class="submenu_more" id="statistics">

</div>

<div id="sitemap" class="submenu">

<img align="absmiddle" class="inactive" src="http://dap.ntua.gr/el/img/plus_disabled.png" /><a href="/services/sitemap">Xml Sitemap</a>

</div><div class="submenu_more" id="sitemap">

</div>

</div>

</div><br>

这将类似于站点地图。问题是我无法捕获具有特定.submenu_more的{​​{1}}类。

jQuery代码：

id

尝试在jsfiddle中点击1oεξάμηνο来查看问题。不要打文字。点击图片右侧的文字。

$(document).ready(function(){
    $(".menu img, .submenu img").click(function(){
        if($(this).attr("class")=="inactive")
            return false;
        var id_clicked=$(this).parent().attr("id");
        var class_clicked=$(this).parent().attr("class");
        visib_clicked=$("."+class_clicked+"_more#"+id_clicked).css("visibility");
        //alert($("."+class_clicked+"_more"+"#1_semester").length);
        if(visib_clicked=="visible"){
            $("."+class_clicked+"_more#"+id_clicked+", ."+class_clicked+"_more#"+id_clicked+">*").css("visibility","hidden");
            $("."+class_clicked+"_more#"+id_clicked+", ."+class_clicked+"_more#"+id_clicked+">*").css("position","absolute");
            $(this).attr("src","http://dap.ntua.gr/el/img/plus.png");
        }else{
            $("."+class_clicked+"_more#"+id_clicked+", ."+class_clicked+"_more#"+id_clicked+">*").css("visibility","visible");
            $("."+class_clicked+"_more#"+id_clicked+", ."+class_clicked+"_more#"+id_clicked+">*").css("position","relative");
            $(this).attr("src","http://dap.ntua.gr/el/img/minus.png");
        }
    });
});

如果我点击visib_clicked=$("."+class_clicked+"_more#"+id_clicked).css("visibility"); 课程，但是对.menu img课程不起作用，则可以正常工作......

一个例子：

.submenu img

我想点击图片.menu_more，id = some_id_1 div disapearead .. 类似的东西和submenu和submenu_more .. 对于菜单，menu_more我的代码工作， 不适用于子菜单，submenu_more ..

我发现了问题.. 问题在于id

的名称 
<div id="some_id_1" class="menu">
<img src="some_src.png"/>
<a href="something">Some text</a>
<div id="same_id with_parent=some_id_1" class="menu_more">
blabla_goes here
</div>

id="1_semester" doesn't work 有效!! 这是为什么？ 如果它不是必要的话，我不想改变我的元素的id

1 个答案:

答案 0 :(得分：-1)

我不太明白你在那里做什么。

var id_clicked=$(this).parent().attr("id");
var class_clicked=$(this).parent().attr("class");
visib_clicked=$("."+class_clicked+"_more#"+id_clicked).css("visibility");

如果id_clicked是父级的id，而class_clicked是父级的类，则isn＆＃39; t $（＆＃34;。＆＃34; + class_clicked +＆＃34; _more＃＆＃34; + id_clicked）只是......父母！？您只能在文档中拥有一个ID

也是，而不是

visib_clicked=$("."+class_clicked+"_more#"+id_clicked).css("visibility");
    if(visib_clicked=="visible"){
     ....

你可以

$( something:visible ).css({
    position : ...
  , visibility ...
})

$( something:hidden ).css({
    position : ...
  , visibility ...
})
相关问题
最新问题