javascript - 如何使用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

您缺少结束语 </div>标签就在该标签之前，因此它位于前一个标签(“stg_install”)内。外部“display: none”将覆盖(某种程度上)内部 <div> 上的“display: block”(或其他内容)。 .

如果不是<div>问题的第一篇文章中存在嵌套问题，那么您提到显示 <div> 时可能会出现问题的提示。与“bill_info”类。如果当前没有显示整个内容，请调用 .show()另一个<div> (“stg_Pdel”<div>)将不起作用。同样，无论“显示”样式设置为何，外部 block 都会隐藏它。

如果“.bill_info”<div>是隐藏的，你需要做这样的事情:

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

您将传递“doShow”“stg_Pdel”、“stg_install”或“stg_close”，并且它将确保其中一个内部 <div>元素正在显示。 编辑更多细节 - 这个想法是做以下事情:

1. 确保整个“bill_info” block 可见；
2. 查找直系子项 <div>元素并将它们全部隐藏；
3. 查找目标“stg”<div>并使其可见

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

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

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

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