Вопрос по Load()
Здравствуйте.Вот html №1
<div class="ok"></div> <div class="load hide"></div> <div class="ok-a">ok</div> <div class="prof">....</div> Есть html№2
<div class="photo_ok" align="center">
<a class="" href="" title="">
<img src="/images/users/ok/1.jpg" alt="" />
</a>
</div>
<div class="photo_ok" align="center">
<a class="" href="" title="">
<img src="/images/users/ok/2.jpg" alt="" />
</a>
</div>
<div class="photo_ok" align="center">
<a class="" href="" title="">
<img src="/images/users/ok/3.jpg" alt="" />
</a>
</div>
Требуется при клике на <div class="ok-a">ok</div>прятоть содержимое <div class="prof">....</div>, а подгружать html№2.С этим я справился так
$(function(){
$('.ok-a').on('click', function(event){
$('.prof').addClass('hide')
$('.load').removeClass('hide')
$('.load').load('/users/ok.html')// html№2
})
})
Теперь нужно, что бы при клике по картинке в <div class="ok"></div> устанавливался background состоящий из этой картинке. И возврат к html№1.Делаю так
$(function()
{
$('.photo_ok img').on('click', function(event)
{
event.preventDefault();
var url = this.getAttribute('src')
$('.ok').css('background-image', url)
$('.prof,.load').toggleClass('hide')
})
})
И не работает.Плиз,хелп. |
Цитата:
$('.load').on('click', '.photo_ok img',function(event)
|
рони,
случаем не знаешь как на нативном подключать html файлы в корневой html? |
DynkanMaclaud,
не понял о чём вопрос ... может про ajax?https://learn.javascript.ru/ajax-xmlhttprequest#итого |
Не хочет background грузиться.
$('.ok-a').on('click', function(event){
$('.prof').addClass('hide')
$('.load').removeClass('hide')
$('.load').load('/users/ok.html')
})
$('.load').on('click', '.photo_ok img',function(event)
{
event.preventDefault();
var url = this.getAttribute('src')
$('.ok').css('background-image', url)
$('.prof,.load').toggleClass('hide')
})
})
alert(url) выводит путь до картинки.При клике на .load всё возвращается как надо, но в .ok нет фона. |
Всё нашёл ошибку.
var url = 'url('+url+')';
Большое спасибо. |
Не подскажите в какую сторону посмотреть, что бы после перезагрузки всё сохранялось?
|
ureech,
на данный момент 10 строка предлагает поставить неведомую зверушку ... попробуйте самостоятельно исправить параметр http://htmlbook.ru/css/background-image |
Цитата:
|
Цитата:
|
OK!
|
Блин, не осилить с наскоку.Не пойму, что в моём случае key, а что value в localStorage.setItem("key", "value");
Сделал так, добавил кнопку в див с фоном (в условие оберну потом)и
$('.load').on('click', '.photo_ok img',function(event)
{
event.preventDefault();
var url = this.getAttribute('src')
var url = 'url('+url+')';
localStorage.url = 'url('+url+')';
$('.ok').css('background-image',url)
$('.prof,.load,.btn').toggleClass('hide')
})
$('.btn').on('click',function(event){
$('.ok').css('background-image',localStorage.url)
})
И конечно не работает |
ureech,
var url = localStorage.url;
url && $('.ok').css('background-image',url);
$('.load').on('click', '.photo_ok img',function(event)
{
event.preventDefault();
url = this.getAttribute('src')
url = 'url('+url+')';
localStorage.url = url;
$('.ok').css('background-image',url)
$('.prof,.load,.btn').toggleClass('hide')
});
|
Понятно.Сегодня я приподнялся в js благодаря Вам.:yes:
|
И последний вопрос.Почему, если я запишу этот скрипт в одну строку(в смысле компрессии),он перестаёт работать?
|
Цитата:
|
Добавил кнопку для сохранения фона.Теперь работает так:
1.Жмём кнопку "ОК" подгружается страница с картинками html№2 2.Кликаем по картинке появляется фон и кнопка "Save" 3.Кликаем "Save" сохраняется фон и возвращается исходня страница html№1 но есть один баг.Если после возврата на страницу html№1 снова перейти на html№2 и выбрать фон, то обратно по "Save" не возвращает, хотя фон после перезагрузки сохраняется.И после перезагрузки снова один раз срабатывает как надо.
$(function() {
$('.ok-a').on('click', function(event) {
$('.prof').addClass('hide');
$('.load').removeClass('hide');
$('.load').load('/users/ok.html');
});
var url = localStorage.url;
url && $('.ok').css('background-image', url);
$('.load').on('click', '.photo_ok img', function(event) {
event.preventDefault();
var url = this.getAttribute('src');
var url = 'url(' + url + ')';
$('.btn').toggleClass('hide');
var stor = $(function() {
$('.btn').on('click', function() {
localStorage.url = url;
$('.prof,.load,.btn').toggleClass('hide');
})
})
if (!this.stor) {
$('.ok').css('background-image', url);
} else {
localStorage.url = url;
$('.ok').css('background-image', url);
}
});
});
|
ureech,
в строке 17 какой бред, который всегда будет true. |
Бред в том, что я ф-цию в переменную воткнул или, что на кнопку localStorage повесил?
|
ureech,
stor зачем? |
По другому не придумал как клик по кнопки в условие поместить.Вернее не клик, а условие сохранения для localStorage
|
| Часовой пояс GMT +3, время: 13:24. |