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

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

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

HTML </ p>

  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;”;
</ code> </ pre>
</ 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>";

douke1891
douke1891 你能告诉我怎么做吗?
接近 4 年之前 回复
dopnpoh056622
dopnpoh056622 你想如何区分div,我的意思是索引或其他一些属性
接近 4 年之前 回复

3个回答



您必须使用 this </ code>对象来定位您对所点击元素的选择,</ p>

  $(document).ready(function(){
$(“。showFormButton”)。click(function(e){
e.preventDefault();
var elm = $ (“。showForm”,this)
elm.css({'display':'block','position':'absolute'});
});
});
</ code> < / pre>

您可以使用 .addClass()</ code>,而不是使用 .css()</ code>来设置属性。 因为它很容易维护,比如将来删除添加的属性。</ p>

  $(document).ready(function(){
$(“。showFormButton”) .click(function(e){
e.preventDefault();
var elm = $(“。showForm”,this)
elm.addClass(“clicked”);
});
}) ;
</ code> </ pre>

CSS:</ strong> </ p>

  .clicked {display:block; 位置:绝对的;  } 
</ code> </ pre>


编辑:</ strong> </ p>

由于目标元素是 当前元素的下一个兄弟,你必须使用 .next(selector)</ code> </ a>在此上下文。</ p>

  $(document).ready(function(){
$(“。showFormButton”)。click(function(e){
e.preventDefault();
var elm = $(this).next(“。showForm”)
elm.css({'display':'block','position':'absolute'});
});
});
</ code> </ pre>
</ div>

展开原文

原文

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

douying8666
douying8666 我认为目标元素是后代,我刚刚更新了答案,现在检查一下。
接近 4 年之前 回复
duanpuchen3142
duanpuchen3142 似乎我不能将我的CSS应用于div对象。
接近 4 年之前 回复
douxieqiu0651
douxieqiu0651 不幸的是,在我的代码中添加'this'是行不通的 - div没有出现。
接近 4 年之前 回复



jQuery具有 .show()</ code>函数,可以使隐藏的东西可见。 看一下这段代码:</ p>

  $(document).ready(function(){
$(document).on('click','。action- btn',function(){
$('。hidden-div')。show();
});
));

&lt; div style =“display:none;” class =“hidden-div”&gt;
隐藏文字
&lt; / div&gt;

&lt; button class =“action-btn”&gt;显示隐藏的div&lt; / button&gt;
</ code> </ pre >
</ div>

展开原文

原文

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>



您可以使用属性</ p>

  $(document)来区分div。  ready(function(){
$(“。showFormButton”)。click(function(e){
e.preventDefault();
$(“。showForm [showme ='1']”)。css(' display','block');
$(“。showForm [showme ='1']”)。css('position','absolute');
});
});
</ 代码> </ pre>

HTML </ p>

  print“&lt; input type ='submit'class ='showFormButton'VALUE ='Ulubiony'onclick =  'ShowDiv()'&gt;“; 

print”&lt; div showme ='1'style ='display:none; margin-left:-170px; margin-top:-60px; background-image:linear- 梯度(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;”;
</ code> </ pre>
</ div>

展开原文

原文

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问