Question

我真的不知道如何正确地说出来，如果标题误导了对不起。

我在js文件中有一个函数，它检查一个元素是否在数据数组中。如果是这样，html页面应该显示元素的所有值（到目前为止一直很好）。但是如果元素不在数组中，我的html页面应该只显示：找不到元素。

js功能：

function containsID(arr, number) {
    var i = arr.length;
    while (i--) {
       if (arr[i].id === number) {
           return true;
       }
    }
    return false;
}

HTML：

{% if containsID(data, id) %} //I want something like that
    <p>{{data[id].text}}</p>
{% else %}
    <p> Not found </p>
{% endif %}

Answer 1

   var desiredLogic = function(id){
         var itemWithGivenId = arr.filter( x=> {  return x.id === id } );
           if ( itemWithGivenId.length ) {
               document.createElement("p").innerText = itemWithGivenId.text;
               //append this element wherever you want to see it on the page
              }
          else{
             document.createElement("p").innerText = "Not found";
             //append this element wherever you want to see it on the page
              }
        }

Answer 2

您需要返回具有给定ID

的项目的索引

function containsID(arr, obj) {
  var i = arr.length;
  while (i--) {
    if (arr[i].id === obj) {
       return i;
    }
  }
  return -1;
}

我不确定{%%}注释代表什么（看起来像某些模板引擎），但你的html应该是这样的：

{% if containsID(data, id) >= 0 %} //I want something like that
  <p>{{data[containsID(data, id)].text}}</p>
{% else %}
  <p> Not found </p>
{% endif %}

更好的是将containsID的结果存储在某个模板变量中，然后使用它两次（一次条件，一次输出）以避免循环数组两次

Answer 3

要从HTML中输出Javascript中的内容，您可以设置元素的innerHTML值。

＆＃13;

function getElement(e) {
    return document.getElementById(e);
}

function foo() {
    getElement("output").innerHTML = "Foo";
}

function bar() {
    getElement("output").innerHTML = "Bar";
}

＆＃13;

<div id="output">
    &nbsp;
</div>

<input type="button" onclick="foo()" value="Foo">
<input type="button" onclick="bar()" value="Bar">

＆＃13;

从js函数的值构建html部分

3 个答案: