在 Oracle-jet 中隐藏一个 div

Question

我正在创建一个 Oracle-Jet 应用程序，我需要在其中使用 ojet-lists。我从 REST API 动态调用数据。这是 list-view- 的屏幕截图

如您所见，我有一些值，即 Sub-Category、观看次数和更改%。问题是我只能隐藏第一个元素的 div，即咨询。这是我调用 REST API 的 JS 代码和隐藏 divs.

的条件

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>

所有方法我都试过了，如有任何帮助，我们将不胜感激。提前感谢您的帮助。

Answer 1

您应该有条件地使用 oj-bind-if 到 show/hide 元素。与 DOM 直接与 jQuery/DOM api 互动不被认为是最佳实践。

Answer 2

正如@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>

在 Oracle-jet 中隐藏一个 div

Hide a div in Oracle-jet

html

javascript

jquery

oracle-jet