Question

我是JavaScript和JQuery的新手，我遇到了以下问题。

在页面中，我有以下选择下拉列表：

<select id="selTipoRap" class="form-control" th:field="*{tipoRappresentante}" required="required" style="width: 55%;" onChange="nascondiBoxDocumentazione(this);">
    ......................................................................
    ......................................................................
    OPTIONS LIST
    ......................................................................
    ......................................................................
</select>

然后我有这个JavaScript函数，当usere选择一个选项进入上一个选择时执行：

function nascondiBoxDocumentazione() {
    alert("NASCONDI");

    elementoDaNascondere = $("#docDelega");

    selectedItem = $("#selTipoRap option:selected").text();
    alert(selectedItem);

    if(selectedItem == "Commissario Prefettizio" || selectedItem == "Delegato del presidente di provincia" || selectedItem == "Presidente di provincia" || selectedItem == "Sindaco") {
        elementoDaNascondere.css("display: none;");
    }   

}

正如您所看到的，此函数检索所选选项的文本值的值（它工作正常），如果文本是其中一个提供的值必须隐藏DOM中的div（具有 id = “docDelega”）这一行：** elementoDaNascondere.css（“display：none;”）;

但它无法正常工作，这个div仍然出现。使用FireBug debuger我可以看到 elementoDaNascondere 被正确地使用并包含所选的div。

为什么呢？我错过了什么？我该如何解决这个问题？

Answer 1

而不是elementoDaNascondere.css("display: none;");使用.hide或.css('display', 'none');

＆＃13;

function nascondiBoxDocumentazione() {
    var elementoDaNascondere = $("#docDelega");
    var selectedItem = $("#selTipoRap option:selected").text();

    if (selectedItem == "Commissario Prefettizio" || selectedItem == "Delegato del presidente di provincia" || selectedItem == "Presidente di provincia" || selectedItem == "Sindaco") {
        // elementoDaNascondere.hide();
        elementoDaNascondere.css('display', 'none');
    }   

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selTipoRap" class="form-control" th:field="*{tipoRappresentante}" required="required" style="width: 55%;" onChange="nascondiBoxDocumentazione(this);">
    <option>1</option>
    <option>Commissario Prefettizio</option>
    <option>3</option>
</select>

<div id="docDelega">DIV</div>

＆＃13;

Answer 2

查找

更改： elementoDaNascondere.css（“display：none;”）;

收件人： $（elementoDaNascondere）.css（“display”，“none”）;

其他：

1。 $（elementoDaNascondere）.hide（）;

2。 $（elementoDaNascondere）.attr（“style”，“display：none”）;

3。 $（elementoDaNascondere）.css（“visibility”，“hidden”）;

function nascondiBoxDocumentazione() {
  $("#divTest").css("display", "none");
}

div {
  background-color: #b0c4de;
  height: 300px;
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" onclick="nascondiBoxDocumentazione()" value="Teste"/><br><br>
<div id="divTest"/>

Answer 3

尝试使用.val（）方法。它将获得所选选项的值，您可以按值添加ckech（它更有用）。

elementoDaNascondere = $("#docDelega");
selectedItem = $("#selTipoRap option:selected").val();
if(selectedItem == 2){ //enter required value
    elementoDaNascondere.hide(); 
}

Answer 4

请尝试elementoDaNascondere.hide（）;而是隐藏你的div 你确定它进入条件并返回true。尝试使用alert或console.log（＆＃39;某些东西＆＃39;）。

Answer 5

您没有正确使用.css()。

您有两种方法可以使用它。

其中一个是当你想要添加/更改一个属性时：
```
$("#foo").css("property", "value");
```
你传递两个字符串参数，第一个包含要添加/更改的css属性，第二个是你希望它拥有的值。
第二种是您想要添加/更改多个属性。在这里你将传递一个物体。
```
$("#foo").css({"property1" : "value1", "property2" : "value2"});
```
我传递了一个对象文字，但是你也可以传递“变量中的一个对象”（在引号中，因为它不是变量中的对象，变量是对象）。

因此，正确使用.css()将是：

elementoDaNascondere.css({"display" : "none"});

或

elementoDaNascondere.css("display", "none");

你也可以使用.hide()，我更喜欢：

elementoDaNascondere.hide();

还有一个观察结果：

你是否在为它赋值之前声明了这个变量??：

elementoDaNascondere = $("#docDelega");

如果没有，这个变量将成为一个全局变量，通常，全局变量只能用于某些特定的事物。总是试图寻找其他方法来获取函数之外的变量值（两种方式）。

这样做：

var elementoDaNascondere = $("#docDelega");

始终注意变量的范围。

为什么我无法使用JavaScript隐藏此div？

5 个答案: