Получить связанный текст Div с jQuery - PullRequest
Новая
       78

Получить связанный текст Div с jQuery

0 голосов
/ 11 июля 2020

После небольшой борьбы и нескольких ценных предложений я нашел решение, которое хорошо работает: 

$(document).ready(function(){
    divs = $(".divs").children();
    divs.each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if (divs.next().length != 0)
            divs.next().show().prev().hide();
        else {
            divs.hide();
            divs.show();
        }
        return false;
    });

    $("#prev").click(function(){
        if (divs.prev().length != 0)
            divs.prev().show().next().hide();
        else {
            divs.hide();
            divs.show();
        }
        return false;
    });
    
    $(".btn").click(function() {
    $('.cbCheck:checkbox:checked').each(function(){
    var id = $(".h2Val").text();
              alert(id + $(this).val());
     });
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="divs">
    <div class="heading">
    <div class="h2Val">
     1
    </div>
      <div>What's the capital of England?</div>
      <div class="heading2">
        <div> 
        <input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
      </div>
      <div>
       <input type="button" class="btn" value="Get Value" />
      </div>
    </div>

    <div class="heading">
    <div class="h2Val">
     2
    </div>
      <div>Who invented computer?</div>
      <div class="heading2">
        <div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
      </div>
        <div>
       <input type="button" class="btn" value="Get Value" />
      </div>
    </div>
  </div>

  <a id="prev">Previous</a>
  <a id="next">Next</a>

Как видите, я показываю несколько вопросов с вариантами, которые нужно выбрать. С помощью кнопок «Назад» и «Далее» я могу просмотреть предыдущий или следующий вопрос и выбрать ответ. Моя проблема заключается в том, что когда я выбираю CheckBox , скажем, в div с классом h2Val , мне нужно получить соответствующий номер этого div. 

1
Ques: What's the capital of England?
Options:
       i) London
      ii) New York

Say Я выбрал Лондон , и когда я нажму кнопку Получить значение , он должен показать мне выбранное значение, а также номер 1 вверху и то же самое для вопроса 2. Я попробовал это, но он дает мне все числа в div: 

$('.cbCheck:checkbox:checked').each(function(){
   var id = $(".h2Val").text(); //Trying to obtain the div text 
   alert(id + $(this).val());
});

Что-нибудь, что я здесь пропустил? Любая идея будет оценена - Спасибо.

1 Ответ

1 голос
/ 11 июля 2020

$(".h2Val").text() получает весь текст из всех совпадающих элементов в селекторе.

Вам необходимо настроить таргетинг на экземпляр в том же контейнере .heading, что и кнопка. Перейдите к основному родительскому контейнеру, используя closest(), и используйте find(), чтобы просматривать только этот экземпляр 

$(document).ready(function() {
  divs = $(".divs").children();
  divs.each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  $("#next").click(function() {
    if (divs.next().length != 0)
      divs.next().show().prev().hide();
    else {
      divs.hide();
      divs.show();
    }
    return false;
  });

  $("#prev").click(function() {
    if (divs.prev().length != 0)
      divs.prev().show().next().hide();
    else {
      divs.hide();
      divs.show();
    }
    return false;
  });

  $(".btn").click(function() {
    var $container = $(this).closest('.heading')
    var id = $container.find(".h2Val").text().trim();
    var $checked = $container.find('.cbCheck:checked');
    var values = $checked.map(function(){
        return this.value
    }).get();
    console.clear()
    console.log('ID: ' + id +' has ' + $checked.length + ' checked');
    console.log('Values: ', values.join())
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="divs">
  <div class="heading">
    <div class="h2Val">
      1
    </div>
    <div>What's the capital of England?</div>
    <div class="heading2">
      <div>
        <input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
    </div>
    <div class="heading2">
      <div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
    </div>
    <div>
      <input type="button" class="btn" value="Get Value" />
    </div>
  </div>

  <div class="heading">
    <div class="h2Val">
      2
    </div>
    <div>Who invented computer?</div>
    <div class="heading2">
      <div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
    </div>
    <div class="heading2">
      <div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
    </div>
    <div class="heading2">
      <div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
    </div>
    <div>
      <input type="button" class="btn" value="Get Value" />
    </div>
  </div>
</div>

<a id="prev">Previous</a>
<a id="next">Next</a>
...