Question

所以，我有四个按钮或带有可点击链接的简单div。

在主页上，订单为A-B-C-D。如果您在B页面上，则该按钮的顺序将更改为B-A-C-D。如果您在C页面上，则订单会更改为C-A-B-D。您可以在下面的图片中看到它。

enter image description here

现在，我可以简单地制作四组按钮并为其设置条件逻辑，但这似乎是一个坏主意，因为会有很多冗余。

根据用户所在的页面重新排列这些buttons或div的好方法是什么？（当然，它将适用于子页面，例如.com / b / more）。

编辑：

到目前为止，它只是四个简单的div，如下所示。

 <?php if ( is_home() ) { ?>
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
    <div id="d">D</div>
 <?php } elseif ( is_page('b') ){ ?>
    <div id="b">B</div>
    <div id="a">A</div>
    <div id="c">C</div>
    <div id="d">D</div>
 <?php } elseif ( is_page('c') ){ ?>
    <div id="c">C</div>
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="d">D</div>
 <?php } elseif ( is_page('d') ){ ?>
    <div id="d">D</div>
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
 <?php } ?>

谢谢！

Answer 1

您可以使用路径名来查找要定位的元素

jQuery(function(a) {
  var a = window.location.pathname.substring(1);
  //to test
  a = 'd/e';
  if (a) {
    var $el = $('#' + a.replace(/\//, '\\/'));
    $el.prependTo($el.parent())
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d/e">d</div>
</div>

Answer 2

使用纯JavaScript的一种方法是：

// using Immediately-Invoked Function Expression,
// not entirely necessary, but it keeps everything
// contained:
(function prefaceWith(suppliedPathName) {

  // the potential 'valid' values for the ids,
  // I'd prefer to get this list dynamically,
  // using some form of attribute-selector:
  var valid = ['a', 'b', 'c', 'd'],

    // if we have a 'suppliedPathName' then we get
    // the second character ('1'), the first
    // character of a pathName is the '/';
    // otherwise we use the default first-value from
    // the array of valid values:
    id = suppliedPathName ? suppliedPathName.charAt(1) : valid[0],

    // if the retrieved 'id' is present in the array of valid
    // values we retrieve the element with that 'id', otherwise
    // we get the element with id of the first valid value:
    elem = valid.indexOf(id) > -1 ? document.getElementById(id) : document.getElementById(valid[0]),

    // retrieving the parent of the found element:
    parent = elem.parentNode;

  // inserting the found element before the current
  // first-child of the parent:
  parent.insertBefore(elem, parent.firstChild);

// passing in the current pathName to the function:
})(window.location.pathName);

(function prefaceWith(suppliedPathName) {

  var valid = ['a', 'b', 'c', 'd'],
    id = suppliedPathName ? suppliedPathName.charAt(1) : valid[0],
    elem = valid.indexOf(id) > -1 ? document.getElementById(id) : document.getElementById(valid[0]),
    parent = elem.parentNode;

  parent.insertBefore(elem, parent.firstChild);


})(window.location.pathName);

div {
  height: 2em;
  width: 50%;
  text-align: center;
  margin: 0 auto 0.5em auto;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 2em;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  background-color: blue;
}
#d {
  background-color: yellow;
}

<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>

外部JS Fiddle demo，用于实验/开发。

为了演示动态选择，我给了'有效'<div>元素一个自定义data-*元素，在这种情况下：data-button，当函数被选中时，它们将被选中运行。

请注意，我故意省略data-button元素的id="a"属性，并提供此HTML：

<div id="a">a</div>
<div id="b" data-button>b</div>
<div id="c" data-button>c</div>
<div id="d" data-button>d</div>

这个JavaScript：

(function prefaceWith(suppliedPathName) {

  // This line is the only change, here we're using
  // Array.prototype.map(), with Function.prototype.call(),
  // to convert the NodeList result of document.querySelector()
  // into an array of the 'id's of the <div> elements with
  // the 'data-button' attribute we used to select:
  var valid = Array.prototype.map.call(document.querySelectorAll('div[data-button]'), function(div) {

      // returning the element's 'id':
      return div.id;
    }),
    id = suppliedPathName ? suppliedPathName.charAt(1) : valid[0],
    elem = valid.indexOf(id) > -1 ? document.getElementById(id) : document.getElementById(valid[0]),
    parent = elem.parentNode;

  parent.insertBefore(elem, parent.firstChild);


})(window.location.pathName);

(function prefaceWith(suppliedPathName) {

  var valid = Array.prototype.map.call(document.querySelectorAll('div[data-button]'), function(div) {
      return div.id;
    }),
    id = suppliedPathName ? suppliedPathName.charAt(1) : valid[0],
    elem = valid.indexOf(id) > -1 ? document.getElementById(id) : document.getElementById(valid[0]),
    parent = elem.parentNode;

  parent.insertBefore(elem, parent.firstChild);


})(window.location.pathName);

div {
  height: 2em;
  width: 50%;
  text-align: center;
  margin: 0 auto 0.5em auto;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 2em;
}
#a {
  background-color: red;
}
#b {
  background-color: green;
}
#c {
  background-color: blue;
}
#d {
  background-color: yellow;
}

<div id="a">a</div>
<div id="b" data-button>b</div>
<div id="c" data-button>c</div>
<div id="d" data-button>d</div>

由于“A”不再是有效的“按钮”，<div>的{{1}}会自动成为第一个。{/ p>

参考文献：

Array.prototype.indexOf()。
Array.prototype.map()。
Conditional/ternary Operator。
document.getElementById()。
document.querySelectorAll()。
Function.prototype.call()。
Immediately-Invoked Function Expressions。
Node.insertBefore。
Node.parentNode。

根据页面重新排列按钮

2 个答案: