Функция не определена - uncaught referenceerror

nth-of-type работает в соответствии с индексом того же типа элемента, но nth-child работает только в соответствии с индексом независимо от того, какой тип элементов сиблингов.

Например

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>

Предположим, что в выше html мы хотим скрыть все элементы, имеющие класс отдыха.

В этом случае nth-child и nth-of-type будут работать точно так же, как и все элементы одного типа, <div>, поэтому css должен быть

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

OR

.rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){
    display:none;
}

Теперь вам должно быть интересно узнать, в чем разница между nth-child и nth-of-type, так что это разница

Предположим, что html is

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>

В приведенном выше html тип элемента .rest отличается от других .rest - это абзацы, а другие - div, поэтому в этом случае if вы используете nth-child, вы должны писать так

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

, но если вы используете nss-тип css, это может быть

.rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
    display:none;
}

Как тип Элементом .rest является <p>, поэтому здесь nth-of-type обнаруживает тип .rest, а затем он накладывает css на 1-й, 2-й, 3-й, 4-й, 5-й элементы <p>.

29
задан Cyclonecode 19 September 2015 в 10:05
поделиться

5 ответов

Как насчет удаления атрибута onclick и добавления идентификатора:

<input type="image" src="btn.png" alt="" id="img-clck" />

И вашего сценария:

$(document).ready(function(){
    function codeAddress() {
        var address = document.getElementById("formatedAddress").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
            }
        });
    }
    $("#img-clck").click(codeAddress);
});

Таким образом, если вам нужно изменить имя функции или что-то еще не нужно трогать HTML.

37
ответ дан ifaour 19 September 2015 в 10:05
поделиться

Проблема в том, что codeAddress() не имеет достаточно возможностей для вызова из кнопки. Вы должны объявить это вне обратного вызова к ready():

function codeAddress() {
    var address = document.getElementById("formatedAddress").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
        }
    });
}


$(document).ready(function(){
    // Do stuff here, including _calling_ codeAddress(), but not _defining_ it!
});
45
ответ дан Humberto 19 September 2015 в 10:05
поделиться

Вы должны написать тело этой функции за пределами ready ();

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

$(document).ready(function() {
    $("Some id/class name").click(function(){
        alert("i'm in");
    });
});

, но вы не можете сделать это, если вызываете функцию «showAmount» по событию onchange / onclick

$(document).ready(function() {
    function showAmount(value){
        alert(value);
    }

});

Вы должны написать «showAmount» за пределами ready ();

function showAmount(value){
    alert(value);//will be called on event it is bind with
}
$(document).ready(function() {
    alert("will display on page load")
});
14
ответ дан Vijay C 19 September 2015 в 10:05
поделиться

Ваша проблема здесь в том, что вы не понимаете объем, который вы устанавливаете.

Вы передаете функции ready саму функцию. В этой функции вы создаете другую функцию под названием codeAddress. Этот существует в области, которая его создала, а не в объекте окна (где все и его дядя могли бы это назвать).

Например:

var myfunction = function(){
    var myVar = 12345;
};

console.log(myVar); // 'undefined' - since it is within 
                    // the scope of the function only.

Посмотрите здесь немного больше об анонимных функциях: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern- Углубленный

Другое дело, что я заметил, что вы используете jQuery на этой странице. Это значительно упрощает настройку обработчиков кликов, и вам не нужно ломать голову над настройкой атрибута «onclick» в HTML. Вам также не нужно делать метод codeAddress доступным для всех:

$(function(){
    $("#imgid").click(function(){
        var address = $("#formatedAddress").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);
           }
        });
    });  
});

(Вы должны удалить существующий onclick и добавить идентификатор к элементу изображения, который вы хотите обработать)

Обратите внимание, что я заменил $(document).ready() с его ярлыком всего $() ( http://api.jquery.com/ready/ ). Затем метод click используется для назначения обработчика щелчка элементу. Я также заменил ваш document.getElementById на объект jQuery.

22
ответ дан Jonathon Bolster 19 September 2015 в 10:05
поделиться

Пожалуйста, проверьте, правильно ли вы предоставили JS ссылки. Сначала файлы JQuery, а затем ваши пользовательские файлы. Так как вы используете '$' в своих методах js.

0
ответ дан nayanajith 19 September 2015 в 10:05
поделиться
Другие вопросы по тегам:

Похожие вопросы: