javascript - 如何在 javascript 代码中根据父类区分子类的更改文本？

Question

在我的 html 代码中单击两个按钮之一后，我尝试设置我的子类的值和文本

$(".fce-pool-for > .fce-pool-bar").val($('.fce-pool-bar').val(Math.round(resultFor)));
$(".fce-pool-for > .fce-pool-percentage").text($('.fce-pool-percentage').text((Math.round(resultFor).toString()) + "%"));

$(".fce-pool-against > .fce-pool-bar").val($('.fce-pool-bar').val(Math.round(resultAgainst)));
$(".fce-pool-against > .fce-pool-percentage").text($('.fce-pool-percentage').text((Math.round(resultAgainst).toString()) + "%"));

<div class="fce-pool-against">
  <div class="row">
    <div class="col-1">
      <p class="fce-pool-title">
        <?php the_sub_field('vote_against_title')?>
      </p>
    </div>
    <div class="col-8">
      <progress class="fce-pool-bar" max="100" value="0"></progress>
    </div>
    <div class="col-1">
      <p class="fce-pool-percentage">0 %</p>
    </div>
    <div class="col-1 offset-1">
      <a href="" class="fce-pool-button btn-primary" id="against_more">Less</a>
    </div>
  </div>

  <p>
    <?php the_sub_field('vote_against_note')?>
  </p>

</div>

<div class="fce-pool-for">
  <div class="row">
    <div class="col-1">
      <span class="fce-pool-title"><?php the_sub_field('vote_for_title')?></span>
    </div>
    <div class="col-8">
      <progress class="fce-pool-bar" max="100" value="0"></progress>
    </div>
    <div class="col-1">
      <p class="fce-pool-percentage">0 %</p>
    </div>
    <div class="col-1 offset-1">
      <a href="" class="fce-pool-button btn-success" id="more">More</a>
    </div>
  </div>
  <p>
    <?php the_sub_field('vote_for_note')?>
  </p>
</div>

但不知道当父类不同时如何设置值...请有人建议如何做？？？

Answer 1

我不知道你从哪里得到 resultFor 和 resultAgainst 值，所以我在这里放了一个例子，使用注释掉的函数。

请注意，您问题的关键是“点击了什么，从哪里点击的”。为此，我将一个事件处理程序附加到池 '.fce-pool-against, .fce-pool-for'，针对其中的按钮> '.fce-pool-按钮' 如:

$('.fce-pool-against, .fce-pool-for').on('click', '.fce-pool-button',

然后，在函数内部，我使用附加池(delegateTarget)并在点击事件处理函数执行期间在其中查找内容。

let pool = $(event.delegateTarget);

文档:https://api.jquery.com/event.delegateTarget/

也许更好的解决方案是在每个池中使用数据属性，所以我在其中放了一个示例，这使代码更加通用，我们可以将按钮单击处理程序附加到每个池中，然后使用它, 单击时在每个池中找到我们需要的元素。

单独的事物片段

let resultFor = 20;
let resultAgainst = 13;

$('.fce-pool-for').on('click', '.fce-pool-button', function(event) {
  event.preventDefault();
  let pool = $(event.delegateTarget);
  let resultValue = Math.round(resultFor);
  pool.find('.fce-pool-percentage').text( resultValue + " %");
  pool.find('.fce-pool-bar').val(resultValue);
});

$('.fce-pool-against').on('click', '.fce-pool-button', function(event) {
  event.preventDefault();
  let pool = $(event.delegateTarget);
  let resultValue = Math.round(resultAgainst);
  pool.find('.fce-pool-percentage').text( resultValue + " %");
  pool.find('.fce-pool-bar').val(resultValue);
});

使用数据属性/属性做一些更通用的事情:

$('.fce-pool-against, .fce-pool-for').on('click', '.fce-pool-button', function(event) {
  event.preventDefault(); // keep link from executing
  let pool = $(event.delegateTarget); // the pool
  let votes = pool.data('votes'); // data from the pool
  votes = votes + 1;
  // store new value
  pool.data('votes', votes);
  // update the percent and display
  $('.fce-pool-button').trigger('showvalues');
});
$('.fce-pool-against, .fce-pool-for')
  .on('showvalues', '.fce-pool-button', function(event) {
    event.preventDefault(); // keep link from executing
    let pool = $(event.delegateTarget); // the pool
    let votes = pool.data('votes'); // data from the pool
    let totalVotes = 0;
    $('.fce-pool-button').each(function(e) {
      totalVotes = totalVotes + $(this).closest('.fce-pool').data('votes');
    });
    let percent = (votes / totalVotes) * 100;
    //console.log(totalVotes, votes, percent);
    let resultValue = Math.round(percent);
    // find the elements in our pool, set them
    pool.find('.fce-pool-percentage').text(resultValue + " %");
    pool.find('.fce-pool-bar').val(resultValue);
    pool.find('.votes-display').text(votes);
  })
  .find('.fce-pool-button')
  .trigger('showvalues'); // trigger initial display

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="fce-pool fce-pool-against" data-votes="25">
  <div class="row">
    <div class="col-1">
      <span class="fce-pool-title">
        Against
      </span>
    </div>
    <div class="col-8">
      <progress class="fce-pool-bar" max="100" value="0"></progress>
    </div>
    <div class="col-1">
      <p class="fce-pool-percentage">0 %</p>
    </div>
    <div class="col-1 offset-1">
      <a href="" class="fce-pool-button btn-primary" id="against_more">Less</a>
    </div>
  </div>
  <p>
    Against Votes: <span class="votes-display"></span>
  </p>
</div>

<div class="fce-pool fce-pool-for" data-votes="43">
  <div class="row">
    <div class="col-1">
      <span class="fce-pool-title">For</span>
    </div>
    <div class="col-8">
      <progress class="fce-pool-bar" max="100" value="0"></progress>
    </div>
    <div class="col-1">
      <p class="fce-pool-percentage">0 %</p>
    </div>
    <div class="col-1 offset-1">
      <a href="" class="fce-pool-button btn-success" id="more">More</a>
    </div>
  </div>
  <p>
    For Votes: <span class="votes-display"></span>
  </p>
</div>