Получить внутренний текст диапазона в том же блоке div, что и кнопка

#javascript #jquery

Вопрос:

Как я могу получить внутренний текст диапазона, который находится в блоке div с кнопкой.

html-код

 <div class='itemDivImage'>
    <a href =" .$link_to_page. ">
        <img src=" .$read_row['Bild']." alt=" .$name. "/>
    </a>
    <br>
    <span>".$name."</span>
    <br>
    <span class='price'> Pris:
       <span class='penger2'> ". $read_row['Pris'] ."</span> kr
    </span>
    <br>
    <input type="button" name="' .$name. '" class="bayItem" value="Lägg i varukorg">
    <img src="'.$linkImgAAA. '" class="energysafe" alt="EnergySafe" />
</div>
<div>
    <img id="varukorg_img" src="img/varukorg.png" alt="Varukorg" name="0">
    <a href="#">Varukorg <span class="penger">0</span> kr</a>

Код Jquery

 $(document).ready(function(){

$('.bayItem').click(function(){

        var penger = $('.penger').text();
        var penger2 = $('.penger2').text();

        penger = parseInt(penger);
        penger2 = parseInt(penger2);
            var result = penger   penger2;
            $('.penger').text(result);
            });

});

1. не могли бы вы, пожалуйста, лучше объяснить, что вы пытаетесь сделать?

2. Не вижу ни одного элемента, с class="penger" которым вы пытаетесь получить доступ var penger = $('.penger').text();

3. В вашем html нет penger класса

4. У меня есть 5 разделов на странице. что мне нужно, так это получить внутренний текст диапазона, который находится в том же блоке div, что и кнопка. Потому что все кнопки и диапазон имеют одинаковое имя класса. Возможно, мне нужно использовать «This», но в моем коде это работает только для кнопки

5. $(‘.penger’).text(); находится в моем заголовочном файле.

Ответ №1:

При использовании $('.penger') он возвращает все совпадающие интервалы по всему документу.

Чтобы ограничить тот, который вы хотите, сначала перейдите от вашей кнопки к обтекающему div, а затем снова вниз к соответствующему диапазону, например:

 $(".bayItem").click(function() {
    var wrapper = $(this).closest(".itemDivImage");
    var span = wrapper.find(".penger");
    console.log(span.text());
});

Пример фрагмента:

 $(".bayItem").click(function() {
  var wrapper = $(this).closest(".itemDivImage");
  var span = wrapper.find(".penger");
  console.log(span.text());
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='itemDivImage'>
  <span>Row 1</span>
  <span class='price'> Pris:
       <span class='penger'>12.34</span> kr
  </span>
  <br>
  <input type="button" class="bayItem" value="Lägg i varukorg" />
</div>
<hr/>
<div class='itemDivImage'>
  <span>Row 2</span>
  <span class='price'> Pris:
       <span class='penger'>23.45</span> kr
  </span>
  <br>
  <input type="button" class="bayItem" value="Lägg i varukorg" />
</div>
<hr/>
<div class='itemDivImage'>
  <span>Row 3</span>
  <span class='price'> Pris:
       <span class='penger'>34.56</span> kr
  </span>
  <br>
  <input type="button" class="bayItem" value="Lägg i varukorg" />
</div>

Ответ №2:

Найти:

 $(".bayItem").on('click', function () {
    console.log($(".itemDivImage").find("span").text());
})

Вы можете изменить этот скрипт в соответствии с вашими потребностями

1. и как я могу найти диапазон по имени класса? как вы можете видеть, в html-коде у меня больше диапазона, и с вашим кодом я получаю внутренний текст всех элементов диапазона

2. в методе «find» вы можете использовать любые селекторы jquery api.jquery.com/find

3. Как я уже писал, у меня есть 5 разделов с одинаковыми именами классов, а промежутки имеют одинаковые имена классов. Если я изменю «диапазон» в вашем коде на имя класса, которое мне нужно для получения информации, то я получу значение всех 5 диапазонов. Но мне нужно получить значение spicific. Может быть, мне использовать что-то вроде «Этого»?

Ответ №3:

вы должны использовать «закрытие», например:

 var items = $(".itemDivImage");
$(document).ready(function () {

$(".bayItem").on('click', get_text());
function get_text () {
    //console.log(items);
    for (var i = 0; i < items.length; i  ) {
        (function (index) { //means i counter
            console.log($(items[index]).find("span").text());
        })(i);
    }
 }
});