Блог

Главная - Вопросы по программированию - Какие существуют версии .change() и .toggle(), отличные от jQuery?

Какие существуют версии .change() и .toggle(), отличные от jQuery?

#javascript #jquery

#javascript #jquery

Вопрос:

Как мне преобразовать версию этого кода на jQuery в версию, отличную от jQuery?

jQuery

 jQuery(function($){
    //change event handler for the checkbox
    $('#isTracefile').change(function(){
        //if it is checked set the select element's container to display else hide
        $('#cttracefile').toggle(this.checked);
        //if it is unchecked set the input element's container to display else hide
        $('#custom').toggle(!this.checked);
    }).change()
})


        <div id="cttracefile">
            Sample Tracefiles to use: 
            <select name="tracefile">
                <option value="capacity.13Mbps_200RTT_PER_0.000001.txt">capacity.13Mbps_200RTT_PER_0.000001</option>
            </select> 
        </div>
        <div id="custom">
            <label>Forward Delay: </label><input id="fd" type="number" min="0" max="1000" step="1" value ="100"/> ms
            <br/>
            <label>Reverse Delay: </label><input id="rd" type="number" min="0" max="1000" step="1" value ="100"/> ms
            <br/>
            <label>Download Capacity: </label><input id="down" type="number" min="1" max="30" step="1" value ="1"/> MBps
            <br/>
            <label>Upload Capacity: </label><input id="up" type="number" min="1" max="30" step="1" value ="1"/> MBps
            <br/>
            <label>Packet Error Rate (PER): </label><input id="per" type="number" min="0.00001" max="1" step="0.00001" value ="0.00001"/>
        </div>

Какие существуют версии .change() and, отличные от jQuery .toggle() ?

Комментарии:

1. вы говорите об использовании html <script> -тега внутри файла? это сохранит «все в одном файле» — jquery настолько «обычный», насколько вы можете получить с помощью javascript

2. на вашей скрипке — вы бы просто взяли jquery и скопировали, вставили его в index.html например…. <script>*jquery stuff*</script>

3. да, я могу сделать так; но я предполагаю, что jQuery — это большой файл для копирования в мой html-файл. Однако if-else не должен иметь большого значения для использования только jQuery! Мне нужно сделать это как несколько самописных функций.

4. что вы имеете в виду …»jquery — это большой файл для копирования»?

5. Часть JS находится на скрипке. Я также отредактирую вопрос здесь. Что мне тогда делать ?! У меня есть собственный сервер, отправляющий файлы, и мне нужно отлаживать и прочее. Я хочу сделать index.html как можно меньше.

Ответ №1:

Это может быть использовано в качестве вашего решения, отличного от jquery. Вам просто нужно будет установить начальные значения

 var isTrace = document.getElementById('isTracefile');
var ctTrace = document.getElementById('cttracefile');
var custom = document.getElementById('custom');

isTrace.onchange = function(){
    if (isTrace.checked) {
        ctTrace.style.display = "none";
        custom.style.display = "block";
    } else {
        custom.style.display = "none";
        ctTrace.style.display = "block";
    }
};

Демонстрационная скрипка: http://jsfiddle.net/adjit/3at2c/4 /

Комментарии:

1. Достаточно справедливо! Спасибо. На самом деле флажок должен быть наоборот, но это был всего лишь вопрос добавления «!» 😉 спасибо.

2. Если вы не ждете загрузки страницы TypeError: Cannot read property 'onchange' of null , вы также не запустили ее с первого раза (хотя это довольно простое дополнение к тому, как вы ее написали)

3. @Adjit Интересно, почему это не работает в моем браузере, Opera, IE. Это не должно быть чем-то особенным…

4. @TinaJasmin, скорее всего, имеет какое-то отношение к комментарию Пола С. выше. Перед запуском скрипта убедитесь, что страница загружена, иначе при извлечении элементов может вернуться значение null, если этот элемент еще не был загружен

5. @Adjit Я изменил некоторые части и применил document.onload , но никаких изменений. Знаете ли вы какие-либо способы это исправить?

Ответ №2:

  • $(fn) становится window.addEventListener('load', fn)
  • $('#id') становится document.getElementById('id')
  • $jqo.change(fn) становится element.addEventListener('change', fn)
  • изменение видимости на основе bool element.style.display = bool ? '' : 'none'

Наконец, вы запускаете change событие на своем узле, это немного сложнее сделать в ванили в зависимости от браузеров, которые вы хотите поддерживать, но вы можете использовать element.dispatchEvent с. new Event(type)

Итак, все вместе,

 window.addEventListener('load', function () {
    document.getElementById('isTracefile')
        .addEventListener('change', function () {
            document.getElementById('cttracefile')
                .style.display = this.checked ? '' : 'none';
            document.getElementById('custom')
                .style.display = !this.checked ? '' : 'none';
        });
    document.getElementById('isTracefile').dispatchEvent(new Event('change'));
});