如何在jquery中只顯示一個指定的div

我想顯示一個指定的div，當我點擊按鈕的類.showFormButton，但不幸的是每個div都帶有類.showForm出現。如何使用jQuery只顯示一個.showForm div？ JQUERY：如何在jquery中只顯示一個指定的div

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

來源

2016-07-13 Bartosz Brożek

你喜歡如何區分格，我的意思是索引或其他一些屬性 –

你能告訴我如何做到這一點嗎？ –

你必須使用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' }); 
    }); 
});

來源

2016-07-13 10:37:26

不幸的是，將'this'添加到我的代碼不起作用 - div沒有出現。 –

看來我無法將我的CSS應用於div對象。 –

@BartoszBrożek我認爲目標元素是一個後代，我只是更新了答案，現在檢查它。 –

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>

來源

2016-07-13 10:40:31 Peter

您可以通過使用屬性區分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>";

來源

2016-07-13 13:00:30

如何在jquery中只顯示一個指定的div

回答

相關問題