与对象中的值匹配时的 QuerySelector Id 目标答案

【问题标题】：QuerySelector Id Target when Matches Value in Object与对象中的值匹配时的 QuerySelector Id 目标
【发布时间】：2021-07-01 13:01:31
【问题描述】：

当包含在数组中的相应匹配 JS 对象的“实时”值为 true 时，我无法弄清楚如何正确定位和显示 HTML id 标记。

我希望 JS 循环仅在链接 id 与对象的“scheduleId”匹配并且该对象的“live”值为真时才在调度模块中显示链接。我将如何定位和显示此链接？

在这里查看我的 HTML：



<div class="test-schedule">
   <h2>Schedule</h2>
   <div><span>School of Ed</span><a class="link-class" id="ed">School of Ed link</a></div>
   <div><span>School of Humanities</span><a class="link-class" id="hss">School of Humanities link</a></div>
   <div><span>School of Science</span><a class="link-class" id="sci">School of Science link</a></div>
   <div><span>School of Nursing</span><a class="link-class" id="nursing">School of Nursing link</a></div>
</div>


<style>
.link-class{display:none}
</style>

这里是JS：

const eventList = [

  {
    scheduleId: 'ed',
    live: 'true',
  },
  {
    scheduleId: 'hss',
    live: 'false',
  },
  {
    scheduleId: 'sci',
    live: 'false',
  },
  {
    scheduleId: 'nursing',
    live: 'false',
  },
];

Codepen 链接： https://codepen.io/lvl12sealclubber/pen/PoWbJZQ?editors=1011

【问题讨论】：

我不明白你的问题..不清楚
感谢@Frenchy，我已经修改了我的帖子以帮助澄清。

标签： javascript arrays json sorting object

【解决方案1】：

您可以filter 去掉不需要的数组元素，然后使用简单的forEach 来显示。像这样的：

const eventList = [{
  scheduleId: 'ed',
  live: 'true',
}, {
  scheduleId: 'hss',
  live: 'false',
}, {
  scheduleId: 'sci',
  live: 'false',
}, {
  scheduleId: 'nursing',
  live: 'true',
}];

const scheduleEl = document.querySelector("#schedule")
eventList
  .filter(event => event.live === 'true')
  .forEach(event => {
    scheduleEl.innerHTML += `<p>- ${event.scheduleId}</p>`;
  });

<p>Live event schedule:</p>
<div id="schedule">
</div>

【讨论】：

【解决方案2】：

我会将“live”属性的数据类型更新为布尔值而不是字符串。

在现实世界中，这将是数据驱动的，您不必比较日期，只需检查“实时”属性是否属实。

如果我理解正确，当用户登陆此页面时，您会计算当前日期/时间并显示哪个活动正在进行中。如果是这种情况，您可以只比较当前日期/时间并显示实时日期/时间的链接。无需更新event.live。事实上，你不应该通过 JS 更新你的数据。

另外，不用通过 JS 更新横幅的样式，只需在顶部维护一个占位符并通过 CSS 控制样式。我没有看到通过 JS 来做这件事的价值。

【讨论】：

【解决方案3】：

如果我知道您想根据事件是否在 events 对象上实时显示该事件的链接，您可以尝试一些简单的事情，例如创建一个将显示这样的元素的类

const eventList = [
  {
    scheduleId: "ed",
    live: "true",
  },
  {
    scheduleId: "hss",
    live: "false",
  },
  {
    scheduleId: "sci",
    live: "true",
  },
  {
    scheduleId: "nursing",
    live: "false",
  },
];

const checkLinks = () => {
  for (let event of eventList) {
    if (event.live === "true") {
      document.querySelector("#" + event.scheduleId).classList.add("show-link");
      console.log(event.scheduleId);
    }
  }
};

checkLinks();

.link-class {
  display: none;
}

.show-link {
  display: inline-block;
  color: blue;
}

    <div class="test-schedule">
      <h2>Schedule</h2>
      <div>
        <span>School of Ed </span
        ><a class="link-class" id="ed">School of Ed link</a>
      </div>
      <div>
        <span>School of Humanities </span
        ><a class="link-class" id="hss">School of Humanities link</a>
      </div>
      <div>
        <span>School of Science </span
        ><a class="link-class" id="sci">School of Science link</a>
      </div>
      <div>
        <span>School of Nursing </span
        ><a class="link-class" id="nursing">School of Nursing link</a>
      </div>
    </div>

【讨论】：

【解决方案4】：

如果我理解正确，您希望隐藏所有链接并仅根据 JS 值显示一些链接？你能做到吗：

.link-class {
    visibility: hidden;
}

for (let event of eventList) {
    if (event.live) {
        document.getElementById(event.scheduleId).style.visibility="visible" 
    }
}

【讨论】：