将jQuery代码转换为Javascript

我对JavaScript和jQuery非常新颖。我试图实现一个下拉选择框，其中，当某些项目被选中时，输入文本框被禁用。我能够从不同的StackOverflow问题，黑客一起一些jQuery来实现：将jQuery代码转换为Javascript

<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这？

来源

2012-03-01 user1152142

为什么？你有没有在jQuery中这样做的紧迫原因？ – 2012-03-01 23:57:16

jQuery _is_ Javascript。你尝试了什么？你为什么不喜欢jQuery？ – SLaks 2012-03-01 23:57:27

感谢您的意见。我明白，jQuery是一个Javascript库，它是_is_ Javascript。这主要是一个学习练习，我想了解如何在没有jQuery库的情况下编写上面的代码。 – user1152142 2012-03-02 00:12:10

如果我明白你的代码的意图，你可以这样做。这种遗漏的唯一情况就是隐藏/显示动画，就像你使用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-02 00:20:00 jfriend00

我不会使用“inline”作为可见的显示值，使用“”（空字符串）要好得多，因此元素采用其默认值。 – RobG 2012-03-02 00:25:14

@RobG - 这取决于是否有默认的CSS规则生效或不生效。由于这里的环境并不完全清楚，因此我选择了更符合显示风格的文字，但我理解你的观点。 – jfriend00 2012-03-02 00:31:07

@ jfriend00非常感谢您的回答，非常有帮助 – user1152142 2012-03-02 13:46:31

以它位：

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

$函数创建一个 “jQuery对象”，也就是与其他方法的数组。数组的成员是由选择器选择的元素。在这种情况下，它使用一个ID，因此只有一个元素被选中。它可以被替换为：

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

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

这需要jQuery对象的一个方法的平变化监听器添加到元素时的元素收到变化事件究竟会被调用。如果你只需要一个变化监听器，那么你可以将它连接到OnChange属性：

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

但元素可能为空，那么好做：

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

要从jQuery的位功能，如果你只是想要的元素出现，dissaear，则：

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-02 00:22:25 RobG

将jQuery代码转换为Javascript

回答

相关问题