Как отобразить только один указанный div в JQuery
Я пытаюсь отобразить один указанный div, когда нажимаю кнопку с классом .showFormButton, но, к сожалению, появляется каждый div с классом .showForm. Как сделать так, чтобы с помощью jQuery появлялся только один .showForm div?
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>";
Решение
Вы должны использовать 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; }
Редактировать:
Так как целевой элемент — следующий родственный элемент текущего элемента, вы должны использовать .next(selector) в этом контексте.
$(document).ready(function() {
$(".showFormButton").click(function(e){
e.preventDefault();
var elm = $(this).next(".showForm")
elm.css({'display' : 'block', 'position' : 'absolute' });
});
});
Другие решения
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>
Вы можете отличить 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>";
detector