Перевести функцию Jquery в чистый Javascript - PullRequest
Новая
       2

Перевести функцию Jquery в чистый Javascript

0 голосов
/ 09 сентября 2011

Это мой третий вопрос по теме.По причинам, по которым я не буду вдаваться, я не могу использовать jquery на сайте, над которым я работаю.Как бы вы посоветовали мне перевести этот блок кода на чистый Javascript: 

    <script> 
    $(document).ready(function(){
        $('#rule-type').change(function() {
           var val = $(this).val();
           if (val == 'tid and acc') {
              $('#tid-acc').show();
           }
           else {
              $('#tid-acc').hide(); 
           }
        });
    });
</script>

<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc">

Заранее спасибо!Вот ссылка на jfiddle: http://jsfiddle.net/Wx8Jf/2/

Ответы [ 4 ]

4 голосов
/ 09 сентября 2011 
window.onload = function(){ //when the window has loaded

    //store the input in a variable
    var input = document.getElementById('tid-acc');

    //when the select changes 
    document.getElementById('rule-type').onchange = function() { 
       var val = this.value; 
       if (val == 'tid and acc') {
           input.style.display = ''; //show
       }
       else {
           input.style.display = 'none'; //hide
       }
    };
}

Скрипка: http://jsfiddle.net/Wx8Jf/12/

2 голосов
/ 09 сентября 2011

Чтобы предотвратить удаление объекта из потока содержимого, я бы использовал visibility вместо display ...

http://jsfiddle.net/Wx8Jf/13/

window.onload = function(){
 var element = document.getElementById('tid-acc');
 document.getElementById('rule-type').onchange = function() {
   var val = this.value;
   if (val == 'tid and acc') {
       element.style.visibility = 'visible';
   }
   else {
       element.style.visibility = 'hidden';
   }
 };
}
2 голосов
/ 09 сентября 2011

Это будет довольно сложно - и я думаю, что лучшим ответом было бы пойти на жертвы. Например, 

$('#tid-acc').show();

- это анимация, так что вам, вероятно, будет лучше манипулировать CSS на элементе.чтобы показать / скрыть. 

$('#rule-type').change()

В соответствии с документами просто связывает и обработчик события с событием изменения javascript, так что вы можете посмотреть это и попробовать заменить.

document.ready() можеттакже можно заменить на window.onload.

Я думаю, что я дал вам несколько советов, но я не готов просто сделать эту работу за вас.

0 голосов
/ 09 сентября 2011

У вас есть несколько хороших ответов, вот некоторые альтернативы onload .

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

Другой вариант, который добавляет прослушиватель, как только элемент находится в документе, является встроенным обработчиком, например, 

<script type="text/javascript">

// Library functions that are reused  
function showElement(id) {
  var element = typeof id == 'string'? document.getElementById(id) : id;
  element.style.display = '';
}

function hideElement(id) {
  var element = typeof id == 'string'? document.getElementById(id) : id;
  element.style.display = 'none';
}

// Ad hoc function for this page
function ruleTypeChange(el, id) {
  el.value == 'tid and acc'?  showElement(id) : hideElement(id);
}

</script>

<!-- inline handler -->
<select id="rule-type" onchange="ruleTypeChange(this, 'tid-acc')">
  ...
</select>
<input id="tid-acc">


<!-- alternative - use a bottom script -->
<script type="text/javascript">
document.getElementById('rule-type').onchange = function() {
  ruleTypeChange(this, 'tid-acc');
};
</script>

«Нижний скрипт» может находиться где угодно после элемента, но обычно все функции «загрузки» помещаются в один скрипт непосредственно перед закрывающим тегом тела.Это также создает видимость более быстрой загрузки документа и является простой методологией для реализации.

Что касается встроенных обработчиков, вы часто будете слышать заявления о том, что «скрипт должен быть отделен от кода» от тех, кто использует сложные селекторычтобы найти элементы, только чтобы они сломались, как только структура документа изменилась.Добавление встроенных прослушивателей является не более чем головной болью при обслуживании, чем добавление класса, который может использоваться для последующего добавления прослушивателя или поддержки селекторов, зависящих от структуры документа.Они могут быть добавлены с помощью аналогичной или идентичной серверной логики, которая использовалась бы для добавления класса, идентификатора или атрибута данных.

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

...