如何区分在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-button'如下所示：

$('.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);
});

使用 data 属性/属性执行更通用的操作：

$('.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>

Answer 2

我认为您想要的是能够隔离单击的任何fce-pool-button的父类。

给fce-pool-against和fce-pool-for父母一个像fce-pool一样的普通班级以及他们已经拥有的课程。

然后，您可以通过遍历closest('.fce-pool')来隔离父类fce-pool，并在该父类中使用find()来查找特定元素，例如<progress>。

您还可以使用is()来确定它是for池还是against，以便了解如何管理该实例的数据

$('.fce-pool-button').click(function(event){
// "this" is the button that was clicked
var $pool = $(this).closest('.fce-pool'),
// find the progess element in current instance
$progress = $pool.find('progress.fce-pool-bar'),
// set boolean to know which type it is 
isForPool = $pool.is('.fce-pool-for');// true/false 
// now use logic similar to
$progress.val( isForPool ? resultFor : resultAgainst)
})