javascript - 如何根据javascript代码中的父类来改变子类的文本?
问题描述
单击 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>
但是当父类不同时不知道如何设置值......请有人建议如何做到这一点???
解决方案
我不知道你从哪里得到resultFor
andresultAgainst
值,所以我在里面放了一个例子,使用注释掉的函数。
请注意,您问题的关键是“点击了什么,从哪里点击”。为此,我将一个事件处理程序附加到 pools '.fce-pool-against, .fce-pool-for'
,以 that> 中的按钮为目标'.fce-pool-button'
,如下所示:
$('.fce-pool-against, .fce-pool-for').on('click', '.fce-pool-button',
然后,在函数内部,我使用附加池 (the delegateTarget
) 并在 click 事件处理函数执行期间在其中查找内容。
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>
推荐阅读
- python-3.x - python 3.65插入查询引发操作错误
- xml - 通过扩展 XML Schema
元素 - java - 在java中获取声音样本的长度
- php - 清理从 PHP 数组转换的格式化 JSON
- elasticsearch - 使用 IntelliJ 中的 Elasticsearch 测试框架,如何解决关于 idea_rt.jar 的 jar 地狱?
- android - 使用图像打开 Snapchat
- grails3 - 带有 grails 3 的 eh-cache
- python - Pandas:如果关键字出现在任何列中,则选择行
- fastlane - 使用 fastlane 更新 CHANGELOG.md
- python - Django - 我如何在 ORM 中执行此查询