如何在jquery中只显示一个指定的div

Question

当我点击带有 class .showFormButton 的按钮时，我试图显示一个指定的 div，但不幸的是，每个带有 class .showForm 的 div 都会出现。如何使用 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>";

Answer 1

您必须使用 this 对象将您的选择定位到点击的元素上，

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

您可以使用 .addClass() 而不是使用 .css() 来设置属性。因为维护起来很容易，比如以后删除添加的属性。

$(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' });
   });
});

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

如何在jquery中只显示一个指定的div

How to display only one specified div in jquery

php

jquery

element

display