Question

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

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

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

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>嵌套问题，那么可能会有一个问题提示，你提到用类“bill_info”显示<div>。如果当前没有显示整个内容，则在另一个.show()（“stg_Pdel”<div>）上调用<div>将无效。同样，外部块将隐藏它，无论它的“显示”样式设置为什么。

如果隐藏“.bill_info”<div>，您需要执行以下操作：

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

你将“stS_Pdel”，“stg_install”或“stg_closed”传递给“doShow”，它将确保显示其中一个内部<div>元素。 编辑更多细节 - 我们的想法是做以下事情：

确保全部“bill_info”块可见;
找到直接的子<div>元素并将其全部隐藏起来;
找到目标“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();
  }
}

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

1 个答案: