如何在jQuery中使用'this'來選擇特定元素

我正在嘗試使用jQuery創建下拉列表。每個下拉列表都是同一個班級的一部分。如您所見，截至目前，當您使用'.socialheader'類點擊標題時，它會切換'.socialsub'類的可見性。如何使用'this'關鍵字僅切換所點擊的特定元素的可見性？我意識到我可以在.socialsub類中的每個元素上使用id而不是類，但是我認爲有更簡潔的方法來做同樣的事情。如何在jQuery中使用'this'來選擇特定元素

jQuery的問題：

$(document).ready(function(){ 
$('.socialsub').hide(); 
$('.socialheader').click(function(){ 
     $('.socialsub').slideToggle(); 
});//SHOWS AND HIDES SOCIALSUB CLASS 
});

HTML（部分）：

<h2 class='socialheader'> Green Great Dragons </h2> 
    <div class='socialsub'> 


     <h3> Facebook </h3> 
     <a href="http://www.facebook.com/greengreatdragons">Green Great Dragons on Facebook</a> 


    <br /> 
    <br /> 

     <h3> Bandcamp </h3> 

     <a href="http://greengreatdragons.bandcamp.com">Green Great Dragons on BandCamp</a> 


    <br /> 
    <br /> 
    </div> 


    <h2 class='socialheader'> Colin Jones </h2> 
    <div class='socialsub'> 

     <h3> Twitter </h3> 
     <a href="http://www.twitter.com/colinjones93">Colin Jones on Twitter</a> 


    <br /> 


     <h3> Instagram </h3> 
     <a href="http://www.instagram.com/shredelicious">Colin Jones on Instagram</a> 


     <h3> YouTube </h3> 
     <a href="https://www.youtube.com/channel/UCwz6MLT9afvqHfn06AMkL6Q">Colin Jones on YouTube</a> 


    <br />  
    <br />

來源

2017-08-29 Colin R. Jones

你可以發佈html更多的清除？至少有一部分（包含'socialheader'和'socialsub'） –

像下面這樣做： -

$(document).ready(function(){ 
    $('.socialsub').hide(); 
    $('.socialheader').click(function(){ // you missed $ 
    $(this).next('.socialsub').slideToggle(); 
    }); 
}); // missed in your code

例子： -

$(document).ready(function(){ 
 
$('.socialsub').hide(); 
 
$('.socialheader').click(function(){ // you missed $ 
 
    $(this).next('.socialsub').slideToggle(); 
 
}); 
 
}); // missed in your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<h2 class='socialheader'> Green Great Dragons </h2> 
 
<div class='socialsub'> 
 
\t <h3> Facebook </h3> 
 
\t <a href="http://www.facebook.com/greengreatdragons">Green Great Dragons on Facebook</a> 
 
\t <br /> 
 
\t <br /> 
 
\t <h3> Bandcamp </h3> 
 
\t <a href="http://greengreatdragons.bandcamp.com">Green Great Dragons on BandCamp</a> 
 
\t <br /> 
 
\t <br /> 
 
</div> 
 

 
<h2 class='socialheader'> Colin Jones </h2> 
 
<div class='socialsub'> 
 
\t <h3> Twitter </h3> 
 
\t <a href="http://www.twitter.com/colinjones93">Colin Jones on Twitter</a> 
 
\t <br /> 
 
    <h3> Instagram </h3> 
 
    <a href="http://www.instagram.com/shredelicious">Colin Jones on Instagram</a> 
 
    <h3> YouTube </h3> 
 
    <a href="https://www.youtube.com/channel/UCwz6MLT9afvqHfn06AMkL6Q">Colin Jones on YouTube</a> 
 
\t <br />  
 
\t <br /> 
 
</div>

來源

2017-08-29 23:52:06

@ ColinR.Jones我編輯了我的解決方案。現在檢查 –

這是完美的，謝謝！ –

@ ColinR.Jones高興地幫助你:) :) –

就快...只是替代選擇字符串this：

$(document).ready(function(){ 
    $('.socialsub').hide(); 
    $('.socialheader').click(function(){ 
     $(this).slideToggle(); 
    });//SHOWS AND HIDES *THIS* SOCIALSUB CLASS 
});

來源

2017-08-29 23:51:20 clabe45

，如果我得到你的權利，你在找什麼是：

$('.socialheader').click(function() { 
    $(this).slideToggle(); 
});

來源

2017-08-29 23:52:41 Kristianmitk

我建議這樣的事情

$(document).on('click','.socialheader',function(){ 
    if($('.socialsub').is(":visible")){ 
    $('.socialsub').hide(); 
    }else{ 
    $('.socialsub').show(); 
    } 
});

如果您曾經在點擊功能中動態地創建元素，這種方式會正確地綁定它們。

來源

2017-08-30 00:28:14

如何在jQuery中使用'this'來選擇特定元素

回答

相關問題