БЛОГ НА HUSL


Почему не меняется значение переменной?

Автор вопроса: Dmitriy

есть код

$(document).on('click', '.checkcorpus', function() {

  let dateId = $(this).data('id');
  let corpusId = $(this).data('corpus-id');


  let parent = $(this).parent();
  let main = parent.parent().parent();

  main.find('.corpus-block-date').css('box-shadow', '');
  main.attr('data-id', dateId).attr('data-corpus-id', corpusId);
  parent.css('box-shadow', 'inset 0 0 10px green');


  check = $('.checker');

  check.each(function(index, value) {

    let checkId = $(value).data('id');
    console.log(checkId);

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td style="width:15%; max-width: 20%">
  <div id="accordion-faq" class="accordion md-accordion checker" role="tablist" aria-multiselectable="true" data-id="121" data-corpus-id="1">
    <div data-key="116">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0px; margin-top: 5px; cursor: pointer; box-sizing: border-box;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-116" data-id="116" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-06 </div>

        </div>

      </div>
    </div>
    <div data-key="118">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0 10px; margin-top: 5px; cursor: pointer; box-sizing: border-box;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-118" data-id="118" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-14 </div>

        </div>

      </div>
    </div>
    <div data-key="119">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0 10px; margin-top: 5px; cursor: pointer; box-sizing: border-box;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-119" data-id="119" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-12 </div>

        </div>

      </div>
    </div>
    <div data-key="121">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0px; margin-top: 5px; cursor: pointer; box-sizing: border-box; box-shadow: green 0px 0px 10px inset;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-121" data-id="121" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-08 </div>

        </div>

      </div>
    </div>
    <div data-key="122">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0 10px; margin-top: 5px; cursor: pointer; box-sizing: border-box;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-122" data-id="122" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-10 </div>

        </div>

      </div>
    </div>
  </div>
</td>

в check у меня объект из двух элементов

введите сюда описание изображения

Чуть выше цикла код который при клике на определённый div меняет data-id у этих элементов. Я не понимаю почему в checkId попадают только значения, которые получены при первом клике. Почему при том что значение data-id у элементов поменялось , console.log(checkId); выводит всегда то что было при первом клике.


Источник

Ответы (1 шт):

Автор решения: CbIPoK2513

Почитайте о том что такое .data() и как она работает вот тут - ссылка

В вашем коде я заменил .data('*name*') на .attr('data-*name*')

$(document).on('click', '.checkcorpus', function() {
  let dateId = $(this).attr('data-id');
  let corpusId = $(this).attr('data-corpus-id');
  let parent = $(this).parent();
  let main = parent.parent().parent();

  main.find('.corpus-block-date').css('box-shadow', '');
  main.attr({
    'data-id': dateId,
    'data-corpus-id': corpusId
  });
  parent.css('box-shadow', 'inset 0 0 10px green');

  check = $('.checker');
  check.each(function(index, value) {
    let checkId = $(value).attr('data-id');
    console.log(checkId);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td style="width:15%; max-width: 20%">
  <div id="accordion-faq" class="accordion md-accordion checker" role="tablist" aria-multiselectable="true" data-id="121" data-corpus-id="1">
    <div data-key="116">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0px; margin-top: 5px; cursor: pointer; box-sizing: border-box;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-116" data-id="116" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-06 </div>

        </div>

      </div>
    </div>
    <div data-key="118">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0 10px; margin-top: 5px; cursor: pointer; box-sizing: border-box;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-118" data-id="118" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-14 </div>

        </div>

      </div>
    </div>
    <div data-key="119">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0 10px; margin-top: 5px; cursor: pointer; box-sizing: border-box;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-119" data-id="119" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-12 </div>

        </div>

      </div>
    </div>
    <div data-key="121">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0px; margin-top: 5px; cursor: pointer; box-sizing: border-box; box-shadow: green 0px 0px 10px inset;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-121" data-id="121" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-08 </div>

        </div>

      </div>
    </div>
    <div data-key="122">
      <div class="corpus-block-date" style="border-bottom: 1px solid grey; padding: 10px 0 10px; margin-top: 5px; cursor: pointer; box-sizing: border-box;">

        <div class="row padding-y-5 corpus-block-border checkcorpus" id="dateExpert-122" data-id="122" data-corpus-id="1">

          <div class="col-md-12 text-center check" style="color: orangered;">
            2020-09-10 </div>

        </div>

      </div>
    </div>
  </div>
</td>

И немного не по теме, но конструкцию el.attr('key', val).attr('key2', val2) можно, даже нужно, заменить на el.attr({'key': val, 'key2', val2});

→ Ссылка

licensed under cc by-sa 3.0 with attribution.