Как сделать в jquery так, чтобы в зависимости от того, по какому элементу сделан клик вставлялся тот или иной html?

Question

[Александр Тимофеев]

Написал такой код и он не работает.

$('#razmer-pizzi li').click(function(){
            if($(this) === $('#razmer-pizzi li:first-child')){
                $('.table-chto-vishlo tr:first-child').html('<td>РАЗМЕР ПИЦЦЫ 25 СМ</td>');
            }else if($(this) === $('#razmer-pizzi li:nth-child(2)')){
                $('.table-chto-vishlo tr:first-child').html('<td>РАЗМЕР ПИЦЦЫ 30 СМ</td>');
            }else if($(this) === $('#razmer-pizzi li:nth-child(3)')){
                $('.table-chto-vishlo tr:first-child').html('<td>РАЗМЕР ПИЦЦЫ 40 СМ</td>');
            };
        });

Собственно интересно, что именно в этом коде не так!

Answer 1

[Иван Волков]

Ибо не верное выражение в if () у вас.
Сделайте console.log($(this)); и смотрите что будет в консоле.

Можно примерно вот так - https://jsfiddle.net/oOLokiOo/bgxxgg81/8/

Answer 2

[Дмитрий Сергеевич]

Держи, хотя это тоже самое что написал Дмитрий Ковальский.
fiddle.jshell.net/qmnLnjw1

Answer 3

[Дмитрий Ковальский]

а можно просто проставить значение у data-атрибутов и подставлять только нужный размер
или $('#pizzaSize').html($(this).val())
в обработчике.
UPD:На вопрос что в коде не так ,отвечаю- 1) вы засунули ветвление туда где нет различной логики в зависимости от выбранного элемента. Логика везде одна, значение чуть разнится -на 2 цифры. 2) Ради этой логики вы сраниваете ссылки на элемнты в DOM. Т.е. через jquery гуляете по нему в поисках элемента ради 1 числа. 3)Такой код невозможно поддерживать. если поменять местами порядок элементов - все полетит к черту. Если добавить несколько размеров или тип теста - все полетит к черту.

Answer 4

[Виталий Инчин ☢]

Поправка вашего кода

Лучше использовать switch и индекс элемента, не правда ли?

$('#razmer-pizzi li').click(function(){
  switch($(this).index()){
     case 0: $('.table-chto-vishlo tr:first-child').html('<td>РАЗМЕР ПИЦЦЫ 25 СМ</td>'); break;
     case 1: $('.table-chto-vishlo tr:first-child').html('<td>РАЗМЕР ПИЦЦЫ 30 СМ</td>'); break;
     case 2: $('.table-chto-vishlo tr:first-child').html('<td>РАЗМЕР ПИЦЦЫ 40 СМ</td>');
  }
});

А еще более правильно через data-атрибуты все это дело контролировать.

А я бы сделал:

.table-chto-vishlo tr:first-child{
  text-transform: uppercase;
}

$('#razmer-pizzi li').click(function(){
  var size = [25, 30, 40][$(this).index()];
  $('.table-chto-vishlo tr:first-child').html('<td>Размер пиццы '+size+' см</td>'); 
  //По хорошему, надо создать внутри ячейки span и уже его изменять, а не весь текст мусолить
});

Answer 5

[Stalker_RED]

Подход конечно странный, но ответ на вопрос "что именно не так" такой:
добавьте [0] после селекторов. Как-то так jsfiddle.net/vL32umyL
И да, в jQuery есть eq() - чуть более удобная штука чем nth-child(3), имхо.