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

@Wellper · Регистрация: 19.06.2015

Студворк — интернет-сервис помощи студентам

есть такой 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"ах. Как это реализовать?

@Karssen · 28.07.2015, 13:12

А что этот код вообще делает то? В таком виде он не отрабатывает, в котором вы его предоставили. Ну в теории я могу предположить, что при клике на ссылочку она должна как то меняться в зависимости от класса эктив, а в блоке с телефонами должен оставаться только телефон того же индекса что и нажатая ссылка?

@Wellper · 28.07.2015, 13:24 **[ТС]**

Ну да, все правильно поняли. Только почему не отрабатывает, у меня все работает. Только как к этим ссылочкам прилепить еще другие элементы которые менялись бы. Может как-то конкретные идентификаторы можно задать?

@Karssen · 28.07.2015, 14:01

Не совсем понятно конечно. Но отвечу хотя бы на то как добавлять)

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+']') выполнял бы необходимые действия.

@Wellper · 28.07.2015, 14:44 **[ТС]**

Спасибо, но что-то я не совсем понял. Мне нужно что бы, к примеру, при выборе города менялся телефон, а в футере также менялись другие контактные данные. Если добавить атрибут 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;
    }
}

Наверное стояло указать ее сразу, может это что-то разьяснит)

@Karssen · 28.07.2015, 18:42

Да теперь хоть отрабатывать стало) А то вы кинули кусок кода просто. А здесь чтоб этот код отработал в не хватало функции 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 минуты
Хотя есть чуйка что можно это проще сделать. Если надумаю отпишу)

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	28.07.2015, 13:12
	А что этот код вообще делает то? В таком виде он не отрабатывает, в котором вы его предоставили. Ну в теории я могу предположить, что при клике на ссылочку она должна как то меняться в зависимости от класса эктив, а в блоке с телефонами должен оставаться только телефон того же индекса что и нажатая ссылка? 0

@Wellper 0 / 0 / 1 Регистрация: 19.06.2015 Сообщений: 6
	28.07.2015, 13:24 [ТС]
	Ну да, все правильно поняли. Только почему не отрабатывает, у меня все работает. Только как к этим ссылочкам прилепить еще другие элементы которые менялись бы. Может как-то конкретные идентификаторы можно задать? 0