dongzhuang6177
2016-07-13 10:35
采纳率: 100%
浏览 185

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

I am trying to display one specified div when I am clicking on button with class .showFormButton, but unfortunetly every div with class .showForm appears. How to make only one .showForm div appear using 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>";

图片转代码服务由CSDN问答提供 功能建议

当我点击带有.showFormButton类的按钮时,我试图显示一个指定的div,但不幸的是每个div都有 出现.showForm类。 如何使用jQuery只显示一个.showForm div? JQUERY:

  $(document).ready(function(){
 $(“。showFormButton”)。  click(function(e){
e.preventDefault(); 
 $(“。showForm”)。css('display','block'); 
 $(“。showForm”)。css('position'  ,'绝对'); 
}); 
}); 
   
 
 

HTML

  print“  &lt; input type ='submit'class ='showFormButton'VALUE ='Ulubiony'onclick ='ShowDiv()'&gt;“; 
 
 print”&lt; div style ='display:none; margin-left: -  170px; margin-top:-60px; background-image:线性渐变(rgb(15,159,220),rgb(14,108,148));'  class ='showForm'&gt;“; 
 print”&lt; div&gt;“; 
 print”&lt; p&gt;&lt; b&gt; Dodaj do ulubionych pracownika&lt; / b&gt;&lt; / br&gt; [“。$ row  [ 'imie1']。  “”。$ row ['nazwisko1']。“]&lt; / p&gt;”; 
 print“&lt; p&gt; Osobista notatka&lt; / p&gt;”; 
 print“&lt; FORM ACTION ='view_tm.php'  METHOD ='POST'ENCRYPT ='multipart / form-data'name ='ulubiony_pracownik_dodaj'&gt;“; 
 print”&lt; textarea name ='id_pracownik_op_notatka'warts ='10'cols ='45'&gt;“。  $ row ['notatka']。“&lt; / textarea&gt;”; 
 print“&lt; input type ='hidden'name ='id_pracownik_op'value ='”。  $ row ['id_pracownik']。  “'&gt;”; 
 print“&lt; INPUT TYPE ='submit'id ='showFormButton'NAME ='ulubiony_pracownik'VALUE ='Dodaj do ulubionych'&gt;”; 
 print“&lt; / form&gt;”;  
打印“&lt; / div&gt;”; 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dqsxsmi3704 2016-07-13 10:37
    已采纳

    You have to use this object to target your selection over the clicked element,

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

    Instead of using .css() for setting the properties, you could use .addClass(). Because it would be easy in maintaining, like removing the added properties in future.

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

    CSS:

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

    Edit:

    Since the target element is the next sibling the the current element, you have to use .next(selector) at this context.

    $(document).ready(function() {
       $(".showFormButton").click(function(e){
         e.preventDefault();
         var elm = $(this).next(".showForm")
         elm.css({'display' : 'block', 'position' : 'absolute' });
       });
    });
    
    已采纳该答案
    打赏 评论
  • dongzenglin8292 2016-07-13 10:40

    jQuery has the .show() function to make hidden stuff visible. Take a look at this code snippet:

    $(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>
    
    打赏 评论
  • dongpigui8898 2016-07-13 13:00

    You can distinguish the div by using an attribute

    $(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>";
    
    打赏 评论

相关推荐 更多相似问题