Как показать только один указанный div в jquery

Question

Я пытаюсь отобразить один указанный div, когда я нажимаю кнопку с классом .showFormButton, но, к сожалению, каждый div с классом .showForm появляется. Как сделать только один .showForm div с помощью 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

Вы должны использовать this объект целевого выбор по щелкнутому элементу,

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

Вместо использования .css() для установки свойств, вы может использовать .addClass(). Потому что было бы легко поддерживать, например, удалять добавленные свойства в будущем.

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

CSS:

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

---

Edit:

Поскольку целевой элемент является следующий родственный текущий элемент, вы должны использовать .next(selector) в этом контексте ,

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

Answer 2

jQuery имеет функцию .show(), чтобы сделать видимым скрытое вещество. Посмотрите на этот фрагмент кода:

$(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

Вы можете отличить DIV с помощью атрибута

$(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>";