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;
}
Как тип Элементом
blockquote >.rest
является<p>
, поэтому здесьnth-of-type
обнаруживает тип.rest
, а затем он накладывает css на 1-й, 2-й, 3-й, 4-й, 5-й элементы<p>
.
Как насчет удаления атрибута 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.
Проблема в том, что 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!
});
Вы должны написать тело этой функции за пределами 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")
});
Ваша проблема здесь в том, что вы не понимаете объем, который вы устанавливаете.
Вы передаете функции 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.
Пожалуйста, проверьте, правильно ли вы предоставили JS ссылки. Сначала файлы JQuery, а затем ваши пользовательские файлы. Так как вы используете '$' в своих методах js.