Wie man nur ein spezifiziertes div in jquery anzeigt

Question

Ich versuche, ein bestimmtes div anzuzeigen, wenn ich auf die Schaltfläche mit der Klasse .showFormButton klicke, aber unglücklicherweise erscheint jedes div mit der Klasse .showForm. Wie macht man nur ein .showForm div mit jQuery? JQUERY:

$(document).ready(function() { 
$(".showFormButton").click(function(e){ 
e.preventDefault(); 
$(".showForm").css('display', 'block'); 
$(".showForm").css('position', 'absolute'); 
}); 
}); 

HTML

print "<input type='submit' class='showFormButton' VALUE='Ulubiony' onclick='ShowDiv()'>"; 

    print "<div style='display: none; margin-left: -170px; margin-top: -60px; background-image: linear-gradient(rgb(15, 159, 220),rgb(14, 108, 148));' class='showForm'>"; 
     print "<div >"; 
      print "<p><b>Dodaj do ulubionych pracownika</b></br> [".$row['imie1']. " ".$row['nazwisko1']."]</p>"; 
      print "<p>Osobista notatka</p>"; 
      print "<FORM ACTION='view_tm.php' METHOD='POST' ENCRYPT='multipart/form-data' name='ulubiony_pracownik_dodaj'>"; 
      print "<textarea name='id_pracownik_op_notatka' rows='10' cols='45'>". $row['notatka'] ."</textarea>"; 
      print "<input type='hidden' name='id_pracownik_op' value='" . $row['id_pracownik'] . "'>"; 
      print "<INPUT TYPE='submit' id='showFormButton' NAME='ulubiony_pracownik' VALUE='Dodaj do ulubionych'>"; 
      print "</form>"; 
     print "</div>"; 

Answer 1

Sie haben this Objekt verwenden, um Ihre Auswahl über das Klickelement zum Ziel,

$(document).ready(function() { 
    $(".showFormButton").click(function(e){ 
    e.preventDefault(); 
    var elm = $(".showForm", this) 
    elm.css({'display' : 'block', 'position' : 'absolute' }); 
    }); 
}); 

Statt .css() der Verwendung der Eigenschaften für die Einstellung, Sie könnte .addClass() verwenden. Weil es einfach zu pflegen wäre, wie das Entfernen der hinzugefügten Eigenschaften in der Zukunft.

$(document).ready(function() { 
    $(".showFormButton").click(function(e){ 
    e.preventDefault(); 
    var elm = $(".showForm", this) 
    elm.addClass("clicked"); 
    }); 
}); 

CSS:

.clicked { display:block; position:absolute; } 

---

Edit:

Da das Zielelement das das aktuelle Element das nächste Geschwister ist, haben Sie .next(selector) in diesem Zusammenhang zu verwenden, .

$(document).ready(function() { 
    $(".showFormButton").click(function(e){ 
    e.preventDefault(); 
    var elm = $(this).next(".showForm") 
    elm.css({'display' : 'block', 'position' : 'absolute' }); 
    }); 
}); 

Answer 2

jQuery hat die .show() Funktion, um versteckte Sachen sichtbar zu machen. Werfen Sie einen Blick auf diesen Code-Schnipsel:

$(document).ready(function() { 
    $(document).on('click', '.action-btn', function() { 
     $('.hidden-div').show(); 
    }); 
)); 

<div style="display: none;" class="hidden-div"> 
    Hidden text 
</div> 

<button class="action-btn">Show hidden div</button> 

Answer 3

Sie können die div unterscheiden, indem ein Attribut mit

$(document).ready(function() { 
$(".showFormButton").click(function(e){ 
e.preventDefault(); 
$(".showForm[showme='1']").css('display', 'block'); 
$(".showForm[showme='1']").css('position', 'absolute'); 
}); 
}); 

HTML

print "<input type='submit' class='showFormButton' VALUE='Ulubiony' onclick='ShowDiv()'>"; 

    print "<div showme='1' style='display: none; margin-left: -170px; margin-top: -60px; background-image: linear-gradient(rgb(15, 159, 220),rgb(14, 108, 148));' class='showForm'>"; 
     print "<div >"; 
      print "<p><b>Dodaj do ulubionych pracownika</b></br> [".$row['imie1']. " ".$row['nazwisko1']."]</p>"; 
      print "<p>Osobista notatka</p>"; 
      print "<FORM ACTION='view_tm.php' METHOD='POST' ENCRYPT='multipart/form-data' name='ulubiony_pracownik_dodaj'>"; 
      print "<textarea name='id_pracownik_op_notatka' rows='10' cols='45'>". $row['notatka'] ."</textarea>"; 
      print "<input type='hidden' name='id_pracownik_op' value='" . $row['id_pracownik'] . "'>"; 
      print "<INPUT TYPE='submit' id='showFormButton' NAME='ulubiony_pracownik' VALUE='Dodaj do ulubionych'>"; 
      print "</form>"; 
     print "</div>";