javascript - 在 Oracle-jet 中隐藏一个 div
问题描述
我正在创建一个 Oracle-Jet 应用程序,其中我需要使用 ojet-lists。我从 REST API 动态调用数据。这是列表视图的屏幕截图-
如您所见,我有一些值,即 Sub-Category、Views 和 Change%。问题是我只能隐藏第一个元素的 div,即咨询。这是我调用 REST API 的 JS 代码和隐藏 div 的条件。
function practiceData() {
$.getJSON("REST API").then(function (dataset) {
$.each(dataset, function (index, value) {
data5.push(value); // PUSH THE VALUES INSIDE THE ARRAY.
arrow.push(value.change);
console.dir("data",data5)
console.log("value",value.change)
console.log("arrow", arrow);
arrow.forEach(function(value)
{
if (value == 0) {
document.getElementById("triangle-up-small").style.display = 'none';
document.getElementById("triangle-down-small").style.display = 'none';
console.log("rgjak");
console.log(value);
} else if (value < 0) {
// $("#triangle-up-small").hide();
console.log("hcdsb");
console.log(value);
document.getElementById("triangle-up-small").style.display = 'none';
}
else{
// $("#triangle-down-small").hide();
$("#triangle-up-small").hide();
console.log("123");
console.log(value);
}
});
});
});
}
所有数组值都是数字,这是列表的 HTML 代码-
<oj-list-view id="listview" aria-label="simple list" data="[[dataProvider5]]">
<template slot="itemTemplate" data-oj-as="item">
<!-- <span class="avatar" data-bind="style: { backgroundImage: 'url(\'../images/dvt/' + item.data.id + '.png\')' }"></span>-->
<div class="oj-flex ">
<div class="oj-sm-5 oj-flex-item"><span class="name"><a id="yo"><oj-bind-text value="[[item.data.subcategory]]"></oj-bind-text></a></span></div>
<div class="oj-sm-1 oj-flex-item"><span class="oj-text-xs oj-text-secondary-color" style="float: right;" ><oj-bind-text value="[[item.data.count]]"></oj-bind-text>views</span></div>
<div class="oj-sm-1 oj-flex-item" ><div id="triangle-up-small"style="float: right;"><span id="text-green"><oj-bind-text value="[[item.data.change]]"></oj-bind-text>%</span></div></div>
<div class="oj-sm-1 oj-flex-item"><div id="vl"style="float: right;"><span id="text-green"><oj-bind-text value="[[item.data.change]]"></oj-bind-text>%</span></div></div>
<div class="oj-sm-1 oj-flex-item"><div id="triangle-down-small"style="float: right;"><span id="text-red" style="margin-left: 10px;margin-top:0px;" ><oj-bind-text value="[[item.data.change]]"></oj-bind-text>%</span></div></div>
</div>
</template>
</oj-list-view>
我已经尝试了每一种方法,任何帮助表示赞赏。提前感谢您的帮助。
解决方案
正如@Sumedh Chakravorty 所提到的,这是该问题的工作代码。
<oj-list-view id="listview" aria-label="simple list" data="[[dataProvider5]]">
<template slot="itemTemplate" data-oj-as="item">
<!-- <span class="avatar" data-bind="style: { backgroundImage: 'url(\'../images/dvt/' + item.data.id + '.png\')' }"></span>-->
<script>
</script>
<div class="oj-flex ">
<div class="oj-sm-5 oj-flex-item"><span class="name"><a id="yo"><oj-bind-text value="[[item.data.subcategory]]"></oj-bind-text></a></span></div>
<div class="oj-sm-1 oj-flex-item"><span class="oj-text-xs oj-text-secondary-color" style="float: right;" ><oj-bind-text value="[[item.data.count]]"></oj-bind-text>views</span></div>
<oj-bind-if test="[[item.data.change == '0']]">
<div class="oj-sm-1 oj-flex-item"><div id="vl"style="float: right;"><span id="text-green"><oj-bind-text value="[[item.data.change]]"></oj-bind-text>%</span></div></div>
</oj-bind-if>
<oj-bind-if test="[[item.data.change < '0']]">
<div class="oj-sm-1 oj-flex-item"><div id="triangle-down-small"style="float: right;"><span id="text-red" style="margin-left: 10px;margin-top:0px;" ><oj-bind-text value="[[item.data.change]]"></oj-bind-text>%</span></div></div>
</oj-bind-if>
</div>
</template>
</oj-list-view>
推荐阅读
- json - Azure 中 LogicApp 集成中的映射文件
- c - 为什么 init_pair 在 COLOR_PAIRS 范围的一半内失败?
- html - 使用 Bootstrap 4 在全屏高度响应 div 之后放置 html
- sass - 无法在 Gulp 中完成简单的 Sass 任务
- javascript - 当打字光标离开输入文本字段时如何触发功能?
- powershell-4.0 - 使用 get-childitem 获取文件列表的最有效方法是什么
- python - Tensorflow:具有相同随机种子的不同结果
- vim - vim中的vscode仿真
- c# - 文件无法下载
- java - 使用 JavaFX 手动触发 CheckComboBox 的下拉菜单