"> "> " />

Eén instantie van klikgebeurtenis weergeven

Ik heb meerdere instanties van een besturingselement met een -klasse van InviteControlPanel en een besturingselement met een id van FriendControl gekoppeld bij elke instantie. Ik wil alleen de InviteControlPanel weergeven die is gekoppeld aan de FriendControl waarop ik klik. Alle hulp? Dit is wat ik heb:

<script type="text/javascript">
    $(document).ready(function() {
        $("#FriendControl").click(function() {
            $(".InviteControlPanelClass").show();
        });
    });
</script>

En hier is de HTML met die twee besturingselementen. Opmerking: ik gebruik een ListView , dus elke rij van de ListView heeft een InviteControlPanel en FriendControl .

                                      

  <div class="blogPostHeader clearfix">
      
  </div>
        
                
0
Je mag niet meer dan 1 element hebben met een bepaald ID. Element-ID's moeten uniek zijn.
toegevoegd de auteur Matt Ball, de bron
ook heb je 1 extra afsluitende tag (regel 9 in asp)
toegevoegd de auteur Anil, de bron
Ik ben in de war, waar heb ik meer dan 1 element met een bepaald ID? Is dat omdat ik meerdere instanties van het panel heb met ID = InviteControlPanel?
toegevoegd de auteur jre247, de bron

3 antwoord

Zal ik iets doen zoals het volgende werk?

$("#FriendControl").click(function() {
     $(this).siblings(".InviteControlPanel").show();
});
1
toegevoegd
Nee, omdat het gewenste element geen afstammelingelement is van het geklikte element.
toegevoegd de auteur Matt Ball, de bron

Wat denk je hiervan:

$(document).ready(function() {
   //On DOM Ready, .hide all matched elements.
    $('.InviteControlPanelClass').hide();

   //On click of this element
    $(".FriendControl").click(function() {
       //Find the parent 
  • , get the next control panel and show it. $(this).parent().next('.InviteControlPanelClass').show(); }); });
  • Bekijk deze JSFiddle (soort van dezelfde structuur [ik denk: s], ik heb ook de ID's vervangen door klassen ).

    Zoals gezegd, kunt u slechts 1 ID met InviteControlPanel hebben, het uniek maken en klassen gebruiken.

    Update
    Use this code with the edited above jQuery.

                                          
    
      <div class="blogPostHeader clearfix">
          
      </div>
            
      
    
    0
    toegevoegd
    je zou gewoon $ ('. InviteControlPanelClass'). hide (); in het document kunnen toevoegen. Dus wanneer de pagina wordt geladen, verbergt deze automatisch ALLE invitecontrolpanel elementelementen.
    toegevoegd de auteur Anil, de bron
    Ik heb de bovenstaande code geplaatst, klassen gebruikt, probeer het uit, het zou moeten werken.
    toegevoegd de auteur Anil, de bron
    dat is omdat je ID's gebruikt. jQuery vindt het eerste element en stop. Verander uw code in het gebruik van klassen en het zou moeten werken.
    toegevoegd de auteur Anil, de bron
    Het werkt!! Bedankt voor je hulp!!
    toegevoegd de auteur jre247, de bron
    Op dit moment moet ik de code wijzigen om InviteControlPanelClass te laten verbergen bij het laden van de pagina voordat ik uw wijzigingen kan implementeren, die er super nuttig uitzien. Weet je hoe ik dit met jQuery kan doen?
    toegevoegd de auteur jre247, de bron
    OK, ik begrijp wat je bedoelt. Laat me nu mijn code wijzigen
    toegevoegd de auteur jre247, de bron
    deze code toont InviteControlPanel alleen voor het eerste exemplaar en werkt niet voor andere instanties in lijstweergave
    toegevoegd de auteur jre247, de bron

    U moet niet meer dan één element met hetzelfde ID-label hebben. U moet ook geen paneel binnen een lijst hebben maar buiten een lijstelement. Dat gezegd hebbende, kunt u uw code wijzigen in het volgende:

    HTML:

                                          
    
      
  • Friend
  • javascript:

    $(document).ready(function() {
       $(".FriendControl").click(function() {
           $(this).next(".InviteControlPanel").show();
            });
    });
    

    Merk op dat je het formaat van je originele code zou kunnen behouden en $ (this) .parent (). Next zou kunnen gebruiken in plaats van $ (this) .next maar dat (zoals ik eerder gezegd) een div binnen een ul of ol maar buiten een li is een ongeldige opmaak.

    0
    toegevoegd
    Niet helemaal. Het element met klasse InviteControlPanel nog is geen kind van het element waarop is geklikt.
    toegevoegd de auteur Matt Ball, de bron
    @ MДΓΓБДLL Ja, het is in dit voorbeeld nog een keer kijken naar de HTML.
    toegevoegd de auteur David Brainer, de bron
    @ MДΓΓБДLL Eigenlijk heb je gelijk! Ik lees de klassenstructuur verkeerd, wacht even :)
    toegevoegd de auteur David Brainer, de bron
    @ jre247 children werkt in dit geval niet omdat u op een ankertag klikt in het lijstitem, maar ik heb de code aangepast om in plaats daarvan volgende te gebruiken. probleem. U kunt ook parent (). Children gebruiken als u andere elementen tussen het anker en de div wilt invoegen.
    toegevoegd de auteur David Brainer, de bron
    Deze code werkt ook!
    toegevoegd de auteur jre247, de bron
    Wat zeg je dan als kinderen niet werken?
    toegevoegd de auteur jre247, de bron