Convertir el código de jQuery en JavaScript

StackOverflow https://stackoverflow.com/questions/9526085

Pregunta

Soy muy nuevo en JavaScript y Jquery.Estoy tratando de implementar un cuadro de selección desplegable, por lo que, cuando se seleccionan ciertos elementos, se desactiva un cuadro de texto de entrada.Fui capaz de implementar hackeando juntos algunos jQuery de varias preguntas de STACKOVERFLOW: 

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

Realmente quería implementar esto en JavaScript, pero solo podía hacerlo trabajar con JQery, ¿puede alguien ayudarme a convertir esto en JavaScript puro?

¿Fue útil?

Solución

If I understand the intent of your code, you can do it like this. The only thing this leaves out is animation for hiding/showing like you had with 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();

You can see it work here: http://jsfiddle.net/jfriend00/3xGxp/

Otros consejos

Taking it in bits:

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

The $ function creates a "jQuery object" that is an array with additional methods. The members of the array are the elements selected by the selector. In this case, it is using an ID so only one element is selected. It can be replaced by:

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

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

This calls a method of the jQuery object to add an onchange listener to the element what will be called when the element receives a change event. If you only need one change listener, then you can attach it to the onchange property:

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

But element might be null, so better to do:

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

To remove the jQuery bits from the function, if you just want the element to appear and dissaear, then:

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

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

If you want fade in/out or slide up/down effects, there are very simple libraries to implement those.

Finally there is:

.change();

You could write the whole thing as a single statement, but I think it's much more robust to keep it as seperate statements. Converting the other part is much the same.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top