如何使用jquery在页面上显示特定的div id？

Question

我想在页面上显示具有特定 id 的特定 div。我能够显示带有类信息的 div，但是当我尝试通过提供 div id 来访问它时，它不起作用，这就是我尝试从 javascript 访问它的方式。

if((document.getElementById("apMain.stageId").value) == "11"){
            doShow();
    }else{
      alert('else');
    }
    function doShow(){
            $(".bill_info").show();
      }

我想使用 id= stg_Pdel 访问 div，我已尝试使用

function doShow(){
        $('#stg_Pdel').show();
  }

但无法在页面上打开该 div，正确的做法应该是什么？

我的div是：

<div class="bill_info">
<h3>Additional required fields</h3>
    <div id="stg_install">
        <div class="row">
            <span class="label">
                <form:label path="billingInfo.otc" cssClass="normalText" cssErrorClass="normalTextRed" >OTC:</form:label>
            </span>
            <span class="formw">
                <form:input path="billingInfo.otc" cssClass="normalField" cssErrorClass="validationError" size="25" disabled='true'/>
            </span>
            <span class="error">Values for all charge fields must be numeric.</span>
        </div>
    </div>

    <div id="stg_Pdel">
        <div class="row">
            <span class="label">
            <form:label path="billingInfo.priceId" cssClass="normalText" cssErrorClass="normalTextRed" >Price Type:</form:label>
            </span>
            <span class="formw">
                <form:select path="billingInfo.priceId" cssErrorClass="validationError" disabled='true'>
                    <form:options items="${priceTypes}" itemValue="key" itemLabel="value" />
                </form:select>
            </span>
        </div>
    </div>

    <div id='stg_closed'>
        <div class="row">
            <span class="label">
                <form:label path="billingInfo.billingClassId" cssClass="normalText" cssErrorClass="normalTextRed" >Billing:</form:label>
            </span>
            <span class="formw">
                <form:select path="billingInfo.billingClassId" cssErrorClass="validationError" disabled='true'>
                    <form:option value="" label="--Select--" />
                    <form:options items="${billingTypes}" itemValue="key" itemLabel="value" />
                </form:select>
            </span>
        </div>
    </div>

    <div style="clear:both"></div><br/>
</div>

Answer 1

您在该标签之前缺少结束 标签，因此它位于前一个标签（“stg_install”）内。外部“display: none”将覆盖（某种程度）内部

上的“display: block”（或其他内容）。

如果问题的最初帖子中没有出现

嵌套问题，那么您提到显示

时可能会提示问题。代码> 类“bill_info”。如果整个内容当前未显示，则在另一个

上调用 .show() （“stg_Pdel”

>) 将不会有任何影响。同样，无论“显示”样式设置为何，外部块都会隐藏它。

如果“.bill_info”

被隐藏，您需要执行以下操作：

function doShow(stage) {
  $('.bill_info').show()
    .children('div').hide().end()
    .find('#' + stage).show();
}

您将传递“doShow”“stg_Pdel”、“stg_install”或“stg_angled”，并且它将确保显示这些内部

元素之一。 编辑更多详细信息 - 这个想法是执行以下操作：

1. 确保所有“bill_info”块都是可见的；
2. 找到直接子
   元素并将其全部隐藏；
3. 查找目标“stg”
   并使其可见

请注意，使用 .find() 并不是真正必要的，因为您正在按“id”值进行搜索，但它应该有效。

如果您需要该功能在多个阶段上工作，您可以这样做：

function doShow() {
  $('.bill_info').show()
    .children('div').hide();

  for (var ac = 0; ac < arguments.length; ++ac) {
    var stg = arguments[ac];
    $('#' + stg).show();
  }
}