Форум программистов, компьютерный форум, киберфорум
Наши страницы

jQuery

Войти
Регистрация
Восстановить пароль
 
feniks7
1 / 1 / 0
Регистрация: 12.05.2013
Сообщений: 8
#1

Toggle для DIV - jQuery

12.05.2013, 12:25. Просмотров 776. Ответов 4
Метки нет (Все метки)

Идея такая, что мне нужно менять фоновый рисунок блока, при нажатии на него, если вообще возможно связать тоггл с нажатием на область <div></div>. Вот сделал такую вещь, и не работает. Вопрос в том можно ли вообще так, и если нет, то каким образом можно заменить тоггл в данном случае?
Javascript
1
2
3
4
5
6
7
8
    $("#draggable3").toggle(
    function(){
        $(this).css('backgroundImage', 'url(images/1.jpg)')
    },
    function(){ 
        $(this).css('backgroundImage', 'url(images/2.jpg)')
    }
    );
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.05.2013, 12:25
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Toggle для DIV (jQuery):

Toggle на несколько Div - jQuery
Здравствуйте уважаемые форумчане. Я отчаялся решить вопрос и по этому прошу помощи. У меня есть несколько Div которые я хочу переключать...

Действие по клику из вне div и переключение .toggle - jQuery
Добрый день! Столкнулся с такой проблемой - есть див, по клику которого открывается менюшка. Реализовано это через .toggle, но захотелось,...

Как правильно написать toggle для динамически созданных объектов? - jQuery
Пробовал так, но не получается... $('body').on('toggle', '.ssilka_', (function(){ //туц туц }, function(){ //туц туц }));

Как переместить один div внутрь другого div для каждого поста на сайте? - jQuery
На сайте есть посты (div id=&quot;post-XXXX_XXXX&quot;) В каждом из постов есть див например такого вида - &lt;div class=&quot;source&quot;&gt; Немного ниже в...

toggle() - jQuery
Здраствуйте, как применить к toggle() при &quot;block&quot; эфект fadeOut(), а при &quot;none&quot; 'эфект fadeIn() и slideDown()? По идеи эфект должен...

Toggle - jQuery
jQuery JavaScript Library v1.5 в этой библиотеке Такой код например $('#elzad').toggle(function(){ ...

4
Soldado
731 / 722 / 4
Регистрация: 28.06.2012
Сообщений: 1,318
Записей в блоге: 4
12.05.2013, 12:47 #2
Ваш код рабочий, по-видимому, вы используете библиотеку jquery 1.9 в которой этот событие не поддерживается. Вот мой пример с библиотекой 1.7
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
  <head>
    <title>1.7 toggle</title>
    
    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
 <script type="text/javascript">
$(document).ready(function(){
  
$("#draggable3").toggle(
    function(){
        $(this).css('backgroundImage', 'url(http://moemesto.ru/Bugnet/file/14515723/5.jpg)')
    },
    function(){ 
        $(this).css('backgroundImage', 'url(http://moemesto.ru/Bugnet/file/14515724/6.jpg)')
    }
    );
             
 });/*end  ready*/
 </script>
<style>
#draggable3{
width:150px;    
height:150px;
background-image: url('http://moemesto.ru/Bugnet/file/14515724/6.jpg');
cursor:pointer;
}
 
 
</style>    
  </head>
  <body style="padding:180px;">
<div id="draggable3"></div>
 
</body>
</html>
Для версии 1.9. можно сделать всё с событием click и флагом = 0/1
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
  <head>
    <title>1.9 toggle</title>
    
    
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    
 <script type="text/javascript">
$(document).ready(function(){
var flag=0;  
$("#draggable3").click(function(){
    if(flag==0){
        $(this).css('backgroundImage', 'url(http://moemesto.ru/Bugnet/file/14515723/5.jpg)');
        flag=1;
    }
   else{ 
        $(this).css('backgroundImage', 'url(http://moemesto.ru/Bugnet/file/14515724/6.jpg)');
        flag=0;
    }
    });
             
 });/*end  ready*/
 </script>
<style>
#draggable3{
width:150px;    
height:150px;
background-image: url('http://moemesto.ru/Bugnet/file/14515724/6.jpg');
cursor:pointer;
}
 
 
</style>    
  </head>
  <body style="padding:180px;">
<div id="draggable3"></div>
 
</body>
</html>
1
feniks7
1 / 1 / 0
Регистрация: 12.05.2013
Сообщений: 8
12.05.2013, 12:53  [ТС] #3
Soldado, благодарю, да, использую последнюю версию. Не знал что там это событие не поддерживается... А flag - это просто целочисленная переменная? Мне нужно более чем 2 позиции, то есть можно просто продолжить условия с флаг==2 например?
0
Soldado
731 / 722 / 4
Регистрация: 28.06.2012
Сообщений: 1,318
Записей в блоге: 4
12.05.2013, 12:58 #4
флаг - это просто переменная. Если позиций много - то проверяйте эту переменную и присваивайте ей новое значение и новый фон для блока . Условный код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if(flag==0){
// первый фон
flag=1;
}
else if(flag==1){
// второй фон 
flag=2;
}
else if(flag==2){
// третий фон
flag=3;
}
else{
// последний фон
flag=0;
}
1
feniks7
1 / 1 / 0
Регистрация: 12.05.2013
Сообщений: 8
12.05.2013, 18:03  [ТС] #5
Soldado, как только добавляю условную конструкцию, сразу перестает реагировать на событие click...
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
<script>
$("#draggable3").click(function(){
    if(flag==0){
        $(this).css('backgroundImage', 'url(images/full/Lion.jpg)');
        flag=1;
    }
   else{ 
        $(this).css('backgroundImage', 'url(images/full/damb.jpg)');
        flag=0;
    }
    });
</script>
При нажатии не происходит ничего. Остается черный фон. Хотя при таком коде срабатывает и единожды меняет фон.
Javascript
1
2
3
4
5
<script>
$("#draggable3").click(function(){
        $(this).css('backgroundImage', 'url(images/full/Lion.jpg)');
    });
</script>
Добавлено через 8 минут
Все, я забыл указать переменную в начале скрипта) Спасибо
0
12.05.2013, 18:03
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.05.2013, 18:03
Привет! Вот еще темы с ответами:

Toggle() - jQuery
Исчезает сама надпись &quot;Свернуть форму&quot; что не так? &lt;div id=&quot;closeForm&quot;&gt;Свернуть форму&lt;/div&gt; &lt;!-- Форма --&gt; &lt;form...

Toggle() - jQuery
$(document).ready(function(){ $('#post').click(function(){ $(&quot;#textpost&quot;).toggle(250); }); }); Не пойму как...

jQuery toggle - jQuery
Здравствуйте. Есть такой переключатель в jQuery - toggle. Все отлично работает, вопрос в другом...Есть ли возможность с помощью кода...

Проблемы c toggle JS - jQuery
Привет! Подскажите в чем проблема , вешаю toggle на элемент но при загрузке страницы элемент скрывается. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru