jQuery auf Klick Problem

Ich habe Probleme mit meiner jQuery auf Klick-Funktion. Ich kann nicht herausfinden, was ich falsch mache, da es nicht einmal den Klick in der Konsole registriert (ich habe Haltepunkte gesetzt und weigert sich, meinen Klick zu besuchen). Ich benutze jQuery in anderen Bereichen meines Codes, also denke ich, dass ich es richtig verlinkt habe, und ich habe das Ziel mehrmals überprüft, um sicherzustellen, dass es eine Klasse ist und ich die korrekte Syntax verwende, aber ich muss es verpasst haben etwas. Ich habe das Gefühl, ich habe es mir zu lange angesehen. Jede Hilfe wäre willkommen.jQuery auf Klick Problem

HTML:

<h3 class="collapseButton leftH3" data-toggle="collapse" data-target=".collapse_me"> 
    Returns information about the current User 
    <span class="pull-right" id="arrow_me"> 
     <i class="fa fa-arrow-down" aria-hidden="true"></i> 
    </span> 
</h3>

JS:

function changeArrows() { 
    $('.collapseButton').on("click", function() { 
     $(this).next('.pull-right') 
      .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>'); 
    }); 
} 
changeArrows();

Quelle

2016-09-26 Robert Prine

'$ (this)' löst das 'h3'-Element so ab, wie Sie den Event-Handler geschrieben haben. '.next' findet das nächste nächste Geschwister mit dem angegebenen Selektor und nicht das Kind. Das sollte dich auf den Weg bringen. – Orpheus

Fügen Sie Ihren JS am Ende der Seite ein, damit er nach jQuery ausgeführt wird und das DOM geladen ist? – Zack

@Zack, Mein jQuery ist direkt über meinem js. –

Sie haben children nicht next

function changeArrows() { 
    $('.collapseButton').on("click", function() { 
     $(this).children('.pull-right') 
      .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>'); 
    }); 
}

Quelle

2016-09-26 20:00:43 vert3x

Das hat funktioniert. Ich kann nur Ihre Antwort für ein paar Minuten. –

Froh, dass es funktioniert, sag mir, wenn Sie etwas anderes wollen. – vert3x

Haben Sie versucht,

$(document).ready(function(){ 
changeArrows(); 
});

Quelle

2016-09-26 19:58:23 klikas

Okay, neu geschrieben, es zu tun, was Sie es tun wollen. Beachten Sie, dass anstelle von next() (die folgenden Geschwister Element mit dem angegebenen Selektor erhält), möchten Sie children() (die die Kind Elemente von $(this) erhält).

$(this) endet in fast allen Fällen das h3 Element zu lösen.

$(document).ready(function() { 
    $('.collapseButton').on('click', function(event) { 
    $(this).children('.pull-right') 
     .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>'); 
    }); 
});

Quelle

2016-09-26 19:58:46 Orpheus

Versuchen Sie, den Körper Ihrer Funktion in $(document).ready(...). Ich denke nicht, dass Ihr Event-Handler verfügbar ist, nachdem diese Funktion ausgeführt wurde. Das .next() findet auch das nächste Geschwister, aber das Element, das Sie ändern möchten, ist ein Kind.

$(document).ready(function() { 
    $('.collapseButton').on("click", function() { 
    $(this).children('.fa.fa-arrow-up') 
     .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>'); 
    }); 
})

Quelle

2016-09-26 19:59:29 Gavin

Die auf Klick zu verwenden ist triggert aber Ihr selecotor ist nicht korrekt.

$(this).children('.pull-right').html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');

funktioniert gut für mich (geändert nächste für Kinder)

Quelle

2016-09-26 20:07:36 Shnoo

function changeArrows() { 
     $('.collapseButton').on("click", function() { 
      $(this).find('.pull-right') 
       .html('<i class="fa fa-arrow-up" aria-hidden="true"></i>'); 
     }); 
    } 

    changeArrows();

Quelle

2016-09-26 20:09:31 user6884358

Sie können auch wechseln nur die Klasse für das i Element ohne html Wechsel:

$(".collapseButton").click(function(e) { 
$(this).children('.pull-right').children('.fa-arrow-down').toggleClass('fa-arrow-up'); 
});

Quelle

2016-09-26 20:24:09 cubanGuy

function setVisibility(id1,id2,id3) { 
 
if(document.getElementById('bt1').value=='Show Box 3'){ 
 
document.getElementById('bt1').value = 'Show Box 4'; 
 
document.getElementById('bt1').value = 'Show Box 5'; 
 
document.getElementById(id1).style.display = 'inline'; 
 
document.getElementById(id2).style.display = 'none'; 
 
document.getElementById(id3).style.display = 'none'; 
 
}else{ 
 
document.getElementById('bt1').value = 'Show Box 3'; 
 
document.getElementById(id1).style.display = 'none'; 
 
document.getElementById(id2).style.display = 'inline'; 
 
document.getElementById(id3).style.display = 'inline'; 
 
} 
 
}

<h4 class="pro_detail_title_name_new" >Product Description 
 
<button type=button name=type id='bt1' onclick="setVisibility('sub3','sub4','sub5');";><span id="sub3" class="mobile-plus1"style="display:inline;" >+ </span><span id="sub5" class="fbutton"style="display:none;">-</span> </button></h4> 
 

 
<div id="sub4"style="display:none;">-- inside --</div>

Quelle

2016-09-26 20:27:30

jQuery auf Klick Problem

Antwort

Verwandte Themen