Загрузите исходный HTML в DIV при использовании jquery .load для изменения HTML в этом DIV

У меня есть базовый jquery, который меняет содержимое одного div. Единственное, что я не могу понять, это показать один из четырех внешних HTML-файлов (например, lookbook20141217.HTML) по умолчанию, когда страница загружается первой. Прямо сейчас, контейнер DIV «lookBookWindow» пуст, пока не щелкнули одну из «кнопок».Загрузите исходный HTML в DIV при использовании jquery .load для изменения HTML в этом DIV

JSFIDDLE

HTML

<div id="lookBookMain"> 

<div id="lookBookWindow"></div> 

<input id="lookbook20141217" class="thumbnail rm" type="image" src="thumbnails/20141217.jpg" alt="maurices lookbook20141217" width="220" height="220" border="0" /> 
<input id="lookbook20141114" class="thumbnail rm" type="image" src="thumbnails/20141114.jpg" alt="maurices lookbook20141114" width="220" height="220" border="0" /> 
<input id="lookbook20141018" class="thumbnail rm" type="image" src="thumbnails/20141018.jpg" alt="maurices lookbook20141018" width="220" height="220" border="0" /> 
<input id="lookbook20141016" class="thumbnail" type="image" src="thumbnails/20141016.jpg" alt="maurices lookbook20141016" width="220" height="220" border="0" /> 

</div>

CSS

#lookBookMain { 
    width: 940px; 
    margin: 0px auto; 
    padding: 0px; 
    position: relative; 
} 

#lookBookWindow { 
    width: 940px; 
    height: 580px; 
    margin: 0px; 
    padding: 0px; 
} 

.thumbnail { 
    width: 220px; 
    height: 220px; 
    margin: 0px; 
    padding: 20px 0px 0px 0px; 
    position: relative; 
    float: left; 
} 

input.thumbnail:focus { 
    outline-width: 0; 
} 

.rm{ 
    margin-right: 20px; 
}

Jquery

$('input[type="image"]').click(function() { 
    var pageName = this.id; 
    $('#lookBookWindow').load(pageName + '.html'); 
});

Я чувствую, как это должно быть просто еще одна строка в JQuery, но яне найдя, что мне нужно в Интернете. Заранее спасибо!

источник

2014-10-17 paulmz

Если вы хотите загрузить определенную страницу, просто введите .load() за пределы обработчика кликов.

Другим вариантом было бы, чтобы вызвать щелчок на первом изображении:

$('input[type="image"]').click(function() { 
    var pageName = this.id; 
    $('#lookBookWindow').load(pageName + '.html'); 

}).first().click();

источник

2014-10-17 20:48:43

Похоже, что этот вариант будет немного более динамичным, поскольку он всегда будет запускать ** ** ** кнопку «**» независимо от того, будут ли добавлены/удалены/переупорядочены кнопки. Если я правильно понимаю, это означало бы, что мне не придется настраивать jquery при добавлении кнопок и файлов HTML для контейнера DIV ... правильно? – paulmz

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

Спасибо за подсказку. У меня уже есть общий класс «thumbnail» на «входах», поэтому я просто добавил этот класс к селектору: $ ('input [type = "image"] .thumbnail') Конечно, не стесняйтесь меня знаю, если я сделал это неправильно. – paulmz

Я чувствую, что это должно быть просто еще одна строка в JQuery

Это. Вне:

$('input[type="image"]').click(function() { 
    var pageName = this.id; 
    $('#lookBookWindow').load(pageName + '.html'); 
});

Добавить:

$('#lookBookWindow').load('lookbook20141217.html');

Использование какой HTML файл, который вы хотите загрузить в первую.

источник

2014-10-17 20:46:33 j08691

Да, это то, что мне не хватало. Благодаря! – paulmz

Загрузите исходный HTML в DIV при использовании jquery .load для изменения HTML в этом DIV

ответ

Смежные вопросы