代码之家 › 专栏 › 技术社区 › Rachel

如何使用jquery在页面上显示特定的DIV ID?

jsp jquery-ui javascript

Rachel · 技术社区 · 14 年前

我想在页面上显示具有特定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>

1 回复 | 直到 14 年前

Pointy 14 年前

你错过了闭幕式 </div> 标签就在那个之前,所以它在前一个里面(“stg_安装”)。外部“display:none”将覆盖(某种程度上)内部的“display:block”(或其他内容) <div> .

如果不是 <DIV & GT; 嵌套问题出现在问题的最初位置,然后可能有一个问题提示,您在其中提到显示 <DIV & GT; “Bill_info”类。如果整件事目前还没有出现,那么打电话给 .show() 在另一个 <DIV & GT; (StgpDell) <DIV & GT; )不会有任何效果。同样,无论“显示”样式设置为什么,外部块都将隐藏它。

如果“.bill_info” <DIV & GT; 是隐藏的,您需要这样做:

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

你可以通过“doshow”或者“stg-pdel”、“stg-install”或者“stg-closed”,它将确保其中一个 <DIV & GT; 正在显示元素。 编辑以获取更多详细信息 -其目的是做以下事情:

确保所有“Bill_info”块都可见;
找到直接的孩子 <DIV & GT; 元素并将其全部隐藏;
找到目标“stg” <DIV & GT; 让它可见

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

如果您需要函数在多个阶段上工作,可以这样做:

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

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