Question

我正在构建我的第一段Javascript代码以实现到我的网站中，我遇到了一个问题。我希望用相同的Javascript Onclick代码选择多个DIV并将其转换为CSS指定的增长和缩小。到目前为止，我在第一次点击（收缩不顺利过渡）之后一直遇到弹性基础转换问题，选择单个DIV（因为每个DIV都需要不同的ID，所以我当前正在使用事件。追踪每个DIV的点击次数（我目前正在使用全局变量来跟踪点击次数），只选择DIV而不是DIV的内容（H2或LI与event.target一样）。我希望有人可以帮助我解决Javascript中的这些问题而不是Jquery，因为我从教育的角度来看这个问题。

这是HTML

  <article onclick="imageClick(event)" id="five"  style="background: url(images/mountain_range.jpg) center/cover">
  <h2 class="name">5</h2>
  <li class="details">$</li>
</article>


<section onclick="imageClick(event)" id="eight" style="background: url(images/mountain_range.jpg) center/cover">
  <h2 class="name">8</h2>
    <li class="details">$</li>
</section>

<section onclick="imageClick(event)" id="elleven" style="background: url(images/mountain_range.jpg) center/cover">
  <h2 class="name">11</h2>
  <li class="details">$</li>
</section>

<section onclick="imageClick(event)" id="sixteen" style="background: url(images/mountain_range.jpg) center/cover">
  <h2 class="name">16</h2>
    <li class="details">$</li>
</section>

和Javascript

  var firstClick = true;
  function imageClick(article) {
      if (firstClick) {
        event.target.style.WebkitFlexBasis = "95vw"; // Safari 6.1+
        event.target.style.flexBasis = "95vw";
        firstClick = false;
      } else {
        event.target.style.WebkitFlexBasis = "auto"; // Safari 6.1+
        event.target.style.flexBasis = "auto";
        firstClick = true;
      }
  }

Javascript Onclick Flex-Basis Transition

0 个答案: