javascript - 如何使用 javascript 创建面包屑？

Question

我是 javascript 新手，所以我知道我错过了一些东西，但我就是不知道我错过了什么。

我正在为 Adob​​e Muse 创建一个小部件，并且希望用户能够在小部件内添加或删除面包屑。该小部件允许用户设置 true 或 false 值，我使用 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>

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

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 评论，我不知道 Adob​​e 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;
}