wake-up-neo.net

Führen Sie die jQuery-Funktion onclick aus

also habe ich ein bisschen jQuery implementiert, das den Inhalt grundsätzlich über einen Schieberegler umschaltet, der von einem <a>-Tag aktiviert wurde. Wenn ich jetzt darüber nachdenke, muss das DIV, das die Verbindung hält, die Verbindung sein.

die jQuery, die ich benutze, sitzt in meinem Kopf und sieht so aus:

<script type="text/javascript">
function slideonlyone(thechosenone) {
 $('.systems_detail').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).slideDown(200);
      }
      else {
           $(this).slideUp(600);
      }
 });
}
</script>

ich habe dies als Index-Typ-Feld verwendet, also gibt es mehrere Produkte, wenn Sie auf das <a>-Tag klicken, das früher ein Bild war. * Es würde ein wenig Inhalt darunter darstellen, das die Produktdetails beschreibt:

<div class="system_box">
  <h2>BEE Scorecard database</h2>
  <p>________________</p>
  <a href="javascript:slideonlyone('sms_box');"></a>
</div>

die Produktdetails sind in diesem Div verpackt.

<div class="systems_detail" id="sms_box">
</div>

wenn Sie also auf ein Bild klicken, das früher ein Bild war *, wird die Funktion Slideonlyone ('div_id_name') ausgeführt. Die Funktion oben schließt dann zuerst alle anderen Divs mit dem Klassennamen 'Systemdetails' und öffnet/verschiebt dann das Div mit der ID, die an die Funktion Slideonlyone übergeben wurde. Auf diese Weise können Sie Artikeldetails umschalten und nicht alle gleichzeitig anzeigen lassen.

ich habe nur das <a>-Tag aufbewahrt, um Ihnen zu zeigen, was dort drin war. Ich werde es loswerden.

anmerkung: Ich hatte die Idee, einfach das ganze div in ein <a>-Tag zu packen, aber ist das eine gute Praxis?

Also, was ich mich frage, ist, da Sie JavaScript zum Ausführen von onclick auf ein div-Tag benötigen. Wie schreiben Sie es so, dass meine Slideonlyone-Funktion noch ausgeführt wird?

7
TheLegend

Wenn Sie obtrusive JavaScript (d. H. Inline-Code) wie in Ihrem Beispiel verwenden, können Sie den click-Ereignishandler mit dem div-Attribut an das onclick-Element anfügen.

 <div id="some-id" class="some-class" onclick="slideonlyone('sms_box');">
     ...
 </div>

Jedoch, Die beste Vorgehensweise ist unauffälliges JavaScript, das Sie leicht mit der on()-Methode von jQuery oder der Kurzform click() von jQuery erreichen können. Zum Beispiel:

 $(document).ready( function() {
     $('.some-class').on('click', slideonlyone('sms_box'));
     // OR //
     $('.some-class').click(slideonlyone('sms_box'));
 });

Innerhalb Ihrer Handler-Funktion (in diesem Fall z. B. slideonlyone()) können Sie das Element, auf das ausgelöst das Ereignis (z. B. die Variable div), mit dem Objekt $(this) verweisen. Wenn Sie beispielsweise eine ID benötigen, können Sie mit $(this).attr('id') darauf zugreifen.


EDIT

Nachdem Sie unten Ihren Kommentar zu @fmsf gelesen haben, müssen Sie auch das zu umschaltende Zielelement dynamisch referenzieren. Wie @fmsf vorschlägt, können Sie diese Informationen mit einem Datenattribut wie folgt der div hinzufügen:

<div id="some-id" class="some-class" data-target="sms_box">
    ...
</div>

Um auf das Datenattribut des Elements zuzugreifen, können Sie die attr()-Methode wie im Beispiel von @ fmsf verwenden. Die bewährte Methode ist, die data()-Methode von jQuery wie folgt zu verwenden:

 function slideonlyone() {
     var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example
     var target_id  = $(this).data('target'); // This would be 'sms_box'
     ...
 }

Beachten Sie, wie auf data-target mit data('target') ohne das Präfix data- zugegriffen wird. Mithilfe von Datenattributen können Sie einem Element alle Arten von Informationen anhängen, die von jQuery automatisch zum data-Objekt des Elements hinzugefügt werden.

18
Boaz

Warum müssen Sie es an das HTML anhängen? Binden Sie die Funktion einfach mit dem Hover

$("div.system_box").hover(function(){ mousin }, 
                          function() { mouseout });

Wenn Sie darauf bestehen, JS-Referenzen in der HTML-Datei zu haben, was normalerweise eine schlechte Idee ist, können Sie Folgendes verwenden:

onmouseover="yourJavaScriptCode()"

nach dem thema bearbeiten:

<div class="system_box" data-target="sms_box">

...

$("div.system_box").click(function(){ slideonlyone($(this).attr("data-target")); });
6
fmsf

Sie können die Ereignisse mouseenter und mouseleave binden, und jQuery emuliert diejenigen, bei denen sie nicht systemeigen sind. 

$("div.system_box").on('mouseenter', function(){
    //enter
})
.on('mouseleave', function(){
    //leave
});

Geige

note: Hover nicht verwenden, da dies veraltet ist.

0
gillyspy

Es gibt mehrere Dinge, die Sie hier verbessern können. Es gibt keinen Grund, ein <a> (Anker) -Tag zu verwenden, da Sie keinen Link haben.

Jedes Element kann an Klick- und Hover-Ereignisse gebunden sein ... Divs, Spannweiten, Beschriftungen, Eingaben usw.

Ich kann nicht wirklich herausfinden, was Sie zu tun versuchen. Sie mischen das Ziel mit Ihrer eigenen Implementierung und sind, was ich bisher gesehen habe, nicht wirklich sicher, wie es gemacht wird. Könnten Sie besser veranschaulichen, was Sie erreichen wollen?

== BEARBEITEN ==

Die Anforderungen sind noch sehr vage. Ich habe eine sehr schnelle Version von dem implementiert, was ich mir vorstelle, als würden Sie sagen ... oder etwas in der Nähe, das zeigt, wie Sie dies vielleicht tun könnten. Hat mich wissen lassen, ob ich auf dem richtigen Weg bin.

http://jsfiddle.net/THEtheChad/j9Ump/

0
THEtheChad