Получение элемента через атрибут data?

Question

[prolina]

Всем здравствуйте!!! Есть модальное окно (#pop-up), которое появляется при клике на товар из каталога, где только картинки и название товара. Идея такова: нажимаешь на область около картинки товара (.irem-box), появляется модальное окно (#pop-up) с его описанием. Подскажите пожалуйста, как сделать, чтобы при клике на блок с товаром (div class = "item-box"), было понятно описание какого именно товара показывать, а не первого, как это реализовано сейчас.

<div class="item-box" data-product="pr1">
                            <a href="#" class="item">
                                <div class="img-box">
                                    <div class="img">
                                        <img src="assets/products/1.png" alt="Хлебцы рисовые">
                                    </div>
                                </div>
                                <div class="title-box">
                                    <div class="align-m">
                                        <span class="title">Хлебцы острые</span>
                                    </div>
                                </div>
                                <div class="backing"></div>
                            </a>
                        </div>
                                            <div class="item-box" data-product="pr2">
                            <a href="#" class="item">
                                <div class="img-box">
                                    <div class="img">
                                        <img src="assets/products/2.jpg">
                                    </div>
                                </div>
                                <div class="title-box">
                                    <div class="align-m">
                                        <span class="title">Хлебцы зерновые с тмином</span>
                                    </div>
                                </div>
                                <div class="backing"></div>
                            </a>
                        </div>

<div id="pop-up">
    <div class="main-gallery">
<div class="gallery-cell">
    <div class="product-description">
      <span class="product-title">Хлебцы острые с перцем</span>
      <div class="full-describe">
      
      <span class="product-benefit">
  Мы разработали для Вас «Хлебцы Острые» с перцем, которые используют свойство перца стимулировать выработку эндорфинов – «гормонов счастья», повышающих общий уровень иммунитета человека!
      </span>
    <span class="composition">Состав: пшеница, паприка, перец красный, кориандр, морская соль.</span>
    <span class="nutritional-value">Пищевая ценность на 100 г: белки – 12,0 г; жиры – 1,5 г; углеводы – 72,0 г.
Энергетическая ценность в 100 г – 352 Ккал.</span>
    <span class="product-weight">Вес нетто: 65 г.</span>
    <span class="expiry-date">Срок годности: 9 мес.</span>
  </div>
  <div class="img-opis">
      <img src="assets/products/1.png" class="image-opis">
    </div>
    
  </div>
  </div>
  <div class="gallery-cell">
    <div class="product-description">
    <span class="product-title">Хлебцы зерновые с тмином</span>
    <div class="full-describe">
      <span class="product-benefit">	
  Хлебцы Зерновые с тмином имеют сбалансированный вкус. Не забывайте о пользе витаминов и минеральных веществ так необходимых вашему организму. Мы используем только натуральные ингредиенты, поэтому наша продукция подходит для ежедневного употребления.
      </span>
    <span class="composition">Состав: пшеница, хлопья овсяные, крупа кукурузная, тмин, морская соль.</span>
    <span class="nutritional-value">Пищевая ценность на 100 г: белки – 14,0 г; жиры – 4,0 г; углеводы – 74,0 г.
Энергетическая ценность в 100 г – 405 Ккал.</span>
    <span class="product-weight">Вес нетто: 65 г.</span>
    <span class="expiry-date">Срок годности: 9 мес.</span>
  </div>
    <div class="img-opis">
      <img src="assets/products/2.jpg" class="image-opis">
    </div>
  </div>
</div>
</div>
</div>

$('.item-box').click(function () { 
  $('#pop-up').show(); 
  $("#pop-up").css("z-index",3000000);
    $('.main-gallery').flickity({
   cellAlign: 'left',
            contain: true,
            autoPlay: 10000,
            freeScroll: true,
            wrapAround: true,
});
 	$("#all").css({"background":"rgba(0,0,0,0.5)", "z-index":15000});
});

Наверное нужно через .data(), но не могу реализовать(

Comments

[Olegpc]

В data-product можно указать id товара. Затем при клике на товар, брать этот id и подтягивать данные которые нужны.
var id = $(this).attr('data-product');

[prolina]

Olegpc, Могли бы вы ответить более подробно?? Что-то я не очень поняла( Здесь явно чего-то не хватает(

$(".item-box").click( function() {
	var id = $(this).attr('data-product');
	$("#pop-up").show();
	$("#pop-up").css("z-index",3000000);
    $('.main-gallery').flickity({
   cellAlign: 'left',
            contain: true,
            autoPlay: 10000,
            freeScroll: true,
            wrapAround: true,
});
 	$("#all").css({"background":"rgba(0,0,0,0.5)", "z-index":15000});
});

[Olegpc]

prolina,
если data-product="1", data-product="2" и т.д., то можно так
#pop-up .gallery-cell{
display:none;
}

$(".item-box").click( function() {
  var id = $(this).attr('data-product'),
child = id-1;
$("#pop-up .gallery-cell").eq(child).show();
$("#pop-up").show();
}):

или gallery-cell тоже назначить data-child="1", data-child="2" и т.д.

$(".item-box").click( function() {
  var id = $(this).attr('data-product');
$('#pop-up .gallery-cell[data-child="'+id+'"]').show();
$("#pop-up").show();
}):

[prolina]

Olegpc, спасибо огромное!!! Заработало)

[prolina]

Olegpc, хотя вы знаете, протестила 2 способа, оказалось, что работает не совсем корректно. Показывает нужный товар, но слайдер работает неправильно. Если нажимаю на стрелку, чтобы следующий товар показывался, то он не показывается, а показывается тот, что и при клике(( Слайдер реализован через flickity

Answer 1

[Vladimir Vornicescu]

А чем плох вариант с чтением или записью через атрибут: attr("data-product") ?

Comments

[prolina]

Вариант неплох. У меня в принципе не получается реализовать задуманное

[Vladimir Vornicescu]

С методом .data() у меня тоже были сложности, по этому теперь я строго работаю с .attr() - тут проблем не было да и смысла когда нужно придерживаться .data() я не уловил.

[prolina]

Буду иметь в виду, спасибо)

[prolina]

Может Вы сможете подсказать. Дело касается всё той же темы, описанной выше. Воспользовалась кодом от Olegpc, работало уже верно, сейчас проверила - та же ерунда, появляется описание только первого товара, когда кликаешь на второй. В консоли ошибок нету.

$(".item-box").click( function() {
var id = $(this).attr("data-id");
child = id-1;
$("#pop-up .gallery-cell").eq(child).show();
$("#pop-up").show();
$("#pop-up").css("z-index",3000000);
$('.main-gallery').flickity({
            cellAlign: 'left',
            contain: true,
            pageDots: false,
            freeScroll: true,
            wrapAround: true,  
});
 	$("#all").css({"background":"rgba(0,0,0,0,6)", "z-index":15000}); 	
});

[Vladimir Vornicescu]

Я совершенно не знаю что за код у Olegpc, но могу предположить, что
var id = $(this).attr("data-id");
возвращает одно и то же значение.