С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Wellper
0 / 0 / 1
Регистрация: 19.06.2015
Сообщений: 6
1

Динамическая смена контента, поправить код

28.07.2015, 13:02. Просмотров 486. Ответов 5
Метки нет (Все метки)

есть такой jqery код
Javascript
1
2
3
4
    $(".wrapper-menu .tab").click(function() {
        $(".wrapper-menu .tab").removeClass("active").eq($(this).index()).addClass("active");
        $(".tab_item").hide().eq($(this).index()).fadeIn()
    }).eq(0).addClass("active");
и хтмл

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        <div class="wrapper-menu">
    <div class="tabs">
      <div id="dd" class="wrapper-dropdown-3" tabindex="1">
        <span>Выбрать город</span>
        <ul class="dropdown">
          <li class="tab"><a href="#">Самара</a></li>
          <li class="tab"><a href="#">Казань</a></li>
        </ul>
      </div>
    </div>
    <div class="tab_content">
      <div class="tab_item">(000) 111-11-11</div>
      <div class="tab_item">(888) 222-22-22</div>
    </div>
  </div>
Нужно добавить еще "tab_item"ов, в другой части хтмл документа, которые менялись бы при этих же "tab"ах. Как это реализовать?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.07.2015, 13:02
Ответы с готовыми решениями:

Динамическая смена контента
Доброго времени суток! Возникла небольшая проблема. Есть страница на wordpress...

Динамическая смена background
Есть блоки &lt;div class=&quot;slider_area&quot;&gt; &lt;div class=&quot;slide&quot;&gt;&lt;/div&gt; &lt;div...

Динамическая подгрузка контента
Есть фреймовая страница, например такая: &lt;frameset rows='*, 100'&gt; ...

Динамическая подгрузка контента Ajax
Помогите пожалуйста разобраться. Необходимо на сайте barinel.ru сделать...

Смена контента
Помогите домозговать как сделать смену(контента) даже вернее блока, если...

5
Karssen
151 / 151 / 66
Регистрация: 25.02.2015
Сообщений: 492
28.07.2015, 13:12 2
А что этот код вообще делает то? В таком виде он не отрабатывает, в котором вы его предоставили. Ну в теории я могу предположить, что при клике на ссылочку она должна как то меняться в зависимости от класса эктив, а в блоке с телефонами должен оставаться только телефон того же индекса что и нажатая ссылка?
0
Wellper
0 / 0 / 1
Регистрация: 19.06.2015
Сообщений: 6
28.07.2015, 13:24  [ТС] 3
Ну да, все правильно поняли. Только почему не отрабатывает, у меня все работает. Только как к этим ссылочкам прилепить еще другие элементы которые менялись бы. Может как-то конкретные идентификаторы можно задать?
0
Karssen
151 / 151 / 66
Регистрация: 25.02.2015
Сообщений: 492
28.07.2015, 14:01 4
Не совсем понятно конечно. Но отвечу хотя бы на то как добавлять)
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    var city = prompt('Введите название города');
    var phone = prompt('Введите номер телефона');
 
        var li = $('<li class="tab"><a href="#"></a></li>');
        var div = $('<div class="tab_item"></div>');
        $(li).children('a').text(city);
        $(div).text(phone);
        li.appendTo('.dropdown');
        div.appendTo('.tab_content');
 
});
Так можно добавлять элементы в те же наборы. Но вы как я понял хотите их раскидать по хтмл документу. И такой вариант отрабатывать не будет по причине того, что вы привязываетесь к индексу элемента. Я бы постарался отвязаться от индексирования и для div сделал атрибут name,куда присваивал бы значение == названию города. Не совсем красиво, но должно работать. Выглядело бы так примерно:
HTML5
1
2
<li class="tab"><a href="#">Самара</a></li>
<div class="tab_item" name="Самара">(000) 111-11-11</div>
И в дальнейшем бы внутри события клик брал значение var txt = $('li a').text() и для $('div[name='+txt+']') выполнял бы необходимые действия.
0
Wellper
0 / 0 / 1
Регистрация: 19.06.2015
Сообщений: 6
28.07.2015, 14:44  [ТС] 5
Спасибо, но что-то я не совсем понял. Мне нужно что бы, к примеру, при выборе города менялся телефон, а в футере также менялись другие контактные данные. Если добавить атрибут name ничего не происходит.
prompt не подходит, у меня есть выпадающая менюшка для выбора города
Javascript
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
40
41
42
$(function() {
 
    var dd = new DropDown( $('#dd') );
 
    $(document).click(function( ) {
// all dropdowns
$('.wrapper-dropdown-1').removeClass('active');
});
 
});
 
function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });
 
        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}
Наверное стояло указать ее сразу, может это что-то разьяснит)
0
Karssen
151 / 151 / 66
Регистрация: 25.02.2015
Сообщений: 492
28.07.2015, 18:42 6
Да теперь хоть отрабатывать стало) А то вы кинули кусок кода просто. А здесь чтоб этот код отработал в не хватало функции DropDown. А вот как это все придумать, сейчас глянем)

Добавлено через 1 час 34 минуты
Если коротко, то этот код сложноват для меня в плане переделки. Тут надо аккуратно все делать,дабы не наломать дров) Суть в том что данные задаются через вызов метода конструктора DropDown, который описан в prototype. В этом коде я поковырял прототайп и запилил вывод телефона в футер через прототайп. По сути если нужны какие то данные другие это нужно прописывать через прототайп.
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery</title>
  <script src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
    $(function() {
 
    var dd = new DropDown( $('#dd') );
 
    $(document).click(function( ) {
// all dropdowns
    $('.wrapper-dropdown-1').removeClass('active');
    });
     
    });
     
    function DropDown(el) { //получает в качестве переменной div#dd
        this.dd = el;
        this.placeholder = this.dd.children('span'); //получает span этого дива
        this.opts = this.dd.find('ul.dropdown > li'); //получает выборку li этого дива
        this.val = ''; // инициализация переменной val
        this.index = -1; // инициализация переменной index
        this.phone = '';
        this.initEvents(); // вызывает функцию из прототипа
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this; // в obj  получается попадает наш dropDown
            obj.dd.on('click', function(event){ // тогда по кликуна наш el(div#dd)
                $(this).toggleClass('active');//этот наш див менят класс с эктив на обратный
                return false;
            });
     
            obj.opts.on('click',function(){ //событие навешенное на li по которому кликнули
                var opt = $(this); // выбранный li 
                obj.val = opt.text(); // текст выбранного li
                obj.index = opt.index(); // индекс выбранного li
                obj.placeholder.text(obj.val); // замещение текста в span
                //добавленный код
                obj.phone = $('div.tab_item').eq(obj.index).text();
                var phone = obj.phone;
                console.log(phone);
                var div = $('<div id=dinamic></div>');
                $('#dinamic').remove();
                $(div).text(phone);
                div.appendTo('footer');
 
            });
        },
        getValue : function() {
            return this.val;
        },
        getIndex : function() {
            return this.index;
        }
    }
    
        
        $(".wrapper-menu .tab").click(function() {
        $(".wrapper-menu .tab").removeClass("active").eq($(this).index()).addClass("active");
        $(".tab_item").hide().eq($(this).index()).fadeIn();
 
    }).eq(0).addClass("active");
});
 
</script>
<style>
footer{
width : 100%;
min-height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="wrapper-menu">
    <div class="tabs">
      <div id="dd" class="wrapper-dropdown-3" tabindex="1">
        <span>Выбрать город</span>
        <ul class="dropdown">
          <li class="tab"><a href="#">Самара</a></li>
          <li class="tab"><a href="#">Казань</a></li>
        </ul>
      </div>
    </div>
    <div class="tab_content">
      <div class="tab_item">(000) 111-11-11</div>
      <div class="tab_item">(888) 222-22-22</div>
    </div>
  </div>
 <footer></footer>
</body>
</html>
Добавлено через 24 минуты
Хотя есть чуйка что можно это проще сделать. Если надумаю отпишу)
0
28.07.2015, 18:42
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.07.2015, 18:42

Смена контента без перезагрузки
Здравствуйте! Столкнулась вот с какой проблемой. Делаю загрузку контента без...

Смена контента при выборе города
Здравствуйте. Пытаюсь сделать следующее: 4 колонки, данные берутся из базы. В...

Поочередная смена какого-либо контента
Два текста наложены один на один, по очереди становятся видимыми.


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

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

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