如何使用 javascript 创建面包屑？

Question

我是 javascript 的新手，所以我知道我遗漏了一些东西，但我就是说不出我遗漏了什么。

我正在为 Adobe Muse 创建一个小部件，我想让用户能够在小部件内添加或删除面包屑。该小部件允许用户设置真值或假值，我正在使用 document.write 函数编写代码。该小部件使用 schema.org 标记，因此 itemprop itemscope 等等。

这是脚本的样子

<script type="text/javascript">
    var crumb2 = "true";
    var crumb3 = "true";
        if (crumb2 == "true") {
            document.write("<span>Crumb2</span><span itemscope itemtype='http://data-vocabulary.org/Breadcrumb'><a href='crumb2.html' itemprop='url'><span itemprop='title'>Crumb2 Title</span></a></span>");
        } else if (crumb3 == "true") {
            document.write("<span>Crumb3</span><span itemscope itemtype='http://data-vocabulary.org/Breadcrumb'><a href='crumb3.html' itemprop='url'><span itemprop='title'>Crumb3 Title</span></a></span>");
        }
</script>

据我所知，一旦第一个变量被读取为真，它将忽略其余变量（至少当代码以我编写的方式编写时）。假设这是真的，我怎样才能让它不那样做（因为缺乏正确的术语）？

Answer 1

为什么 document.write？一定有更好的办法。

也就是说，您的问题是我如何拥有多个条件过程而不考虑前一个条件的结果？答案是不要使用 else 部分。

if (true) {
  // Will exuecute
} else if (true) {
  // Will never execute
}

VS

if (true) {
  // Will execute
}
if (true) {
  // Will execute
}

要跟进 document.write 评论，我不知道 Adobe Muse，但如果它在浏览器中，您应该使用 DOM API（或 jQuery) 来管理更改。 document.write 是一个非常滑的斜坡和不好的做法。

为什么不用这样的函数：

function makeCrumElement(url, title) {
  var root = document.createElement('span');
  root.setAttribute('itemscope');
  root.setAttribute('itemtype', 'http://data-vocabulary.org/Breadcrumb');
  var aTag = document.createElement('a');
  aTag.setAttribute('itemprop', 'url');
  aTag.setAttribute('href', url);
  var spanTitle = document.createElement('span');
  spanTitle.setAttribute('itemprop', 'title');
  var titleText = document.createTextNode(title);
  spanTitle.appendChild(titleText);
  aTag.appendChild(spanTitle);
  root.appendChild(aTag);
  return root;
}

或使用innerHTML:

function makeCrumElement(url, title) {
  var root = document.createElement('span');
  root.setAttribute('itemscope');
  root.setAttribute('itemtype', 'http://data-vocabulary.org/Breadcrumb');
  root.innerHTML = '<a href="' + url + '" itemprop="url"><span itemprop="title">' + title + '</span></a>';
  return root;
}

或 jQuery:

function makeCrumElement(url, title) {
  var root = $('<span><a><span></span></a></span>')
    .attr({
      itemscope: true,
      itemtype: 'http://data-vocabulary.org/Breadcrumb'
    });
  root.find('a')
    .attr({
      itemtype: 'url'
      href: url
    })
    .find('span')
    .attr({
      itemprop: 'title'
    })
    .text(title);
  return root;
}

如何使用 javascript 创建面包屑？

How to use javascript to create breadcrumbs?

javascript

if-statement

document.write