In der Nähe ein Fenster mit JavaScript onClick

Auf meiner website habe ich 4 Windows (identifiziert durch target1, target2, target3 und target4). Auf diese Windows-ich möchte hinzufügen eine Schaltfläche mit der Bezeichnung "close" und mit einem onClick-Ereignis rufen Sie die korrekte Funktion abhängig von der Fenster.

function close_window1(){
    document.getElementById('target1').style.display = 'none';  
}

function close_window2(){
    document.getElementById('target2').style.display = 'none';  
}

function close_window3(){
    document.getElementById('target3').style.display = 'none';  
}

function close_window4(){
    document.getElementById('target4').style.display = 'none';  
}

Ich bin mir sicher, dass es einen besseren Weg gibt, als diese:

function close_window(){
    $(this).parents('div').style.display='none'
}

Dieser schließt nur das Fenster, das Ereignis, aber es funktioniert nicht.

Könnte mir bitte jemand helfen?

InformationsquelleAutor Simpleacc | 2014-08-12
  1. 1

    wenn ich verstehe, dass richtig können Sie verwenden Sie einfach diese:

    var windows = $('#target1, #target2, #target3, #target4');
windows.on('click', function() {
  $(this).hide();
});

    Sollten Sie erwägen, den button eine Klasse:

    HTML

    <div class="windows">
 <button class="close_window">X</button>
</div>

    JS

    var closeButtons = $('.close_window');
closeButtons.on('click', function() {
  $(this).parent().hide();
});

    Dann kann man ja eigentlich das Ziel, das Sie wollen 🙂

    Hinsichtlich

    • Nicht alle, ich will nur zu schließen, 1 Fenster (das Fenster, dass ich onlcick Ereignis)
    • aktualisiert den code.
    • Die JS muss ich hinzufügen, es auf den Kopf der HTML-oder ich kann es auf einen .js-Datei?
    • Ok hehe, es funktioniert jetzt 😀 vielen Dank
    • Wie Sie es wünschen. Ich im Grunde wie das aufteilen von html-Code aus js.
    • Yeha, es ist sehr einfach, mit dieser Funktion ^^

    InformationsquelleAutor Michael Schneider
  2. 1

    Könnten Sie beginnen, indem Sie die id-parameter der Funktion so auf:

    function close_window(id) {
    document.getElementById(id).style.display = 'none';
}

    Diese Weise Ihre Schaltfläche onclick-müsste wie folgt Aussehen: "close_window('target1')"

    Können Sie auch die Fenster zu schließen, indem Sie bis die DOM-ausgehend von der-Taste. Um ein Beispiel zu geben für die, die wir brauchen würden, um die tatsächliche HTML.

    InformationsquelleAutor icke
  3. 1

    Bitte überprüfen Sie die Geige

    http://jsfiddle.net/7s49z1zn/

    Hinzufügen eine gemeinsame Klasse für die windows-und die schließen-Schaltfläche. 

    $('.close').click(function(){
    $(this).parents('.window').css('display','none');

    });

    Sollte diese Arbeit

    • Vielen Dank!!! Es funktioniert perfeclty 😀
    InformationsquelleAutor user2285312
  4. 0

    Gedacht ich code wie diesen:

    <div class="window" id="target2">
    <p>TEXT</p>
    <a href="#">Close</a>
</div>

    Wenn Sie code wie diesen, die Sie verwenden können $('.window a').click(); zu fangen, klicken Sie auf Ereignis

    dann bekommen die Eltern var parentWindow = $(this).parent();

    (für die Prüfung, können Sie Fenster-ID über parentWindow.prop('id');)

    und schließlich schließen/ausblenden/fade... parentWindow.fadeOut();

    Hier ist DEMO

    InformationsquelleAutor debute
Schreibe einen Kommentar