Преобразование кода JQuery в Javascript - PullRequest
Новая
       43

Преобразование кода JQuery в Javascript

0 голосов
/ 02 марта 2012

Я очень плохо знаком с Javascript и jQuery. Я пытаюсь реализовать выпадающий список выбора, при котором при выборе определенных элементов текстовое поле ввода отключается. Я смог реализовать это, взломав несколько jQuery из различных вопросов 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>

Я действительно хотел реализовать это в Javascript, но смог только заставить его работать с jQuery, может кто-нибудь помочь мне преобразовать это в чистый Javascript?

Ответы [ 2 ]

2 голосов
/ 02 марта 2012

Если я понимаю цель вашего кода, вы можете сделать это следующим образом. Единственное, что здесь не фигурирует, это анимация для скрытия / показа, как у вас с 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/

1 голос
/ 02 марта 2012

В битах: 

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

Функция $ создает «объект jQuery», который представляет собой массив с дополнительными методами. Членами массива являются элементы, выбранные селектором. В этом случае используется идентификатор, поэтому выбран только один элемент. Его можно заменить на: 

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

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

Это вызывает метод объекта jQuery для добавления слушателя onchange к элементу, который будет вызываться, когда элемент получает событие change . Если вам нужен только один прослушиватель изменений, вы можете присоединить его к свойству 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();

Вы могли бы написать все это как одно утверждение, но я думаю, что гораздо надежнее хранить его как отдельные утверждения. Преобразование другой части во многом аналогично.

...