0

我对 Javascript 和 jQuery 很陌生。我正在尝试实现一个下拉选择框，从而在选择某些项目时禁用输入文本框。我能够通过从各种 StackOverFlow 问题中破解一些 jQuery 来实现：

<select name="Severity-of-your-symptoms" id="Severity-of-your-symptoms" class="cformselect" >
    <option value="full01_severity_notselected" selected="selected">Please select...</option>
    <option value="full01_severity_other">Mild</option>
    <option value="full01_severity_other">Moderate</option>
    <option value="Severe">Severe</option>
    <option value="full01_severity_other">Other</option>
</select>
<br />
<input type="text" id="li-10-14" />

<input type="text" name="firstname" title="First Name" style="color:#888;"
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" id='color'/>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>  

<script type="text/javascript">

$('#Severity-of-your-symptoms').change(function() {
  $("#li-10-14")[$(this).val() == "full01_severity_other" ? 'show' : 'hide']("fast");
}).change();

$('#Severity-of-your-symptoms').change(function() {
    $("#li-10-14")[$(this).val() == "full01_severity_other" ? $('#color').attr("disabled", true)
 : $('#color').attr("disabled", false)]
}).change();

</script>

我真的很想用 Javascript 实现它，但只能用 jQuery 来实现它，谁能帮我把它转换成纯 Javascript 吗？

4

2 回答 2

2

如果我了解您的代码的意图，您可以这样做。唯一遗漏的是用于隐藏/显示的动画，就像使用 jQuery 一样。

// this code should be located after the rest of the HTML at the end of the <body> tag
function checkSeverity() {
    var displayVal, disabledVal;
    if (document.getElementById("Severity-of-your-symptoms").value == "full01_severity_other") {
        displayVal = "inline";
        disabledVal = true;
    } else {
        displayVal = "none";
        disabledVal = false;
    }
    document.getElementById("li-10-14").style.display = displayVal;
    document.getElementById("color").disabled = disabledVal;
}

// hook up the event handler
document.getElementById("Severity-of-your-symptoms").onchange = checkSeverity;
// call it initially to establish the initial state
checkSeverity();

你可以在这里看到它的工作：http: //jsfiddle.net/jfriend00/3xGxp/

于 2012-03-02T00:20:00.630 回答
1

一点一点：

$('#Severity-of-your-symptoms')

$ 函数创建一个“jQuery 对象”，它是一个带有附加方法的数组。数组的成员是选择器选择的元素。在这种情况下，它使用了一个 ID，因此只选择了一个元素。它可以替换为：

var element = document.getElementById('severity-of-your-symptoms');

.change(function(){...})

这会调用 jQuery 对象的一个​​方法来为元素添加一个onchange侦听器，当元素接收到更改事件时将调用该侦听器。如果您只需要一个更改侦听器，则可以将其附加到 onchange 属性：

element.onchange = function(){...};

但是元素可能为空，所以最好这样做：

if (element) element.onchange = function(){...};

要从函数中删除 jQuery 位，如果您只想让元素出现和消失，那么：

function() {
  var element = document.getElementById('li-10-14');

  if (this.value == "full01_severity_other") {
    element.style.display = element.style.display == 'none'? '' : 'none';
  }
}

如果您想要淡入/淡出或向上/向下滑动效果，有非常简单的库来实现这些。

最后还有：

.change();

你可以把整个事情写成一个单独的语句，但我认为将它作为单独的语句保存会更加健壮。转换另一部分大致相同。

于 2012-03-02T00:22:25.243 回答