Question

当我在智能手机的屏幕上“点击”时，我正在使用jQuery和Hammer.js来修改网站的样式属性。

我有3个元素：img#icone-bijagos，p#texte-bijagos和a#lien-bijagos。链接lien-bijagos与图像icone-bijagos相关。文本texte-bijagos的不透明度在CSS中设置为0。

当我第一次“点击”时，我希望文本的不透明度变为1，并且我不希望链接激活。在第二次点击时，我希望链接激活自己。

我认为我将使用if条件：if opacity==="0"，然后使用opacity==="1"和pointerEvents==="none"（以停用链接），如果使用opacity==="1"，则使用pointerEvents==="auto"。但这是行不通的。

当我第一次点击屏幕时，出现文本并且链接没有激活，但是当我再次点击时，什么也没有发生。

var iconeBijagos = document.getElementById("icone-bijagos");
if (document.getElementById("texte-bijagos").style.opacity === "0") {
  Hammer(iconeBijagos).on("tap", function(event) {
    document.getElementById("lien-bijagos").style.pointerEvents === "none";
    document.getElementById("texte-bijagos").style.opacity === "1";
  });
} else if (document.getElementById("texte-bijagos").style.opacity === "1") {
  Hammer(iconeBijagos).on("tap", function(event) {
    document.getElementById("lien-bijagos").style.pointerEvents === "auto";
  });
}

#icone-bijagos {
  position: absolute;
  left: 41%;
  top: 40%;
  width: 2%;
}

#icone-bijagos:hover {
  width: 2.2%;
}

#texte-bijagos {
  position: absolute;
  left: 43.5%;
  top: 37%;
  opacity: 0;
  color: #ff9600;
  font-weight: bold;
}

#bijagos:hover #texte-bijagos {
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  opacity: 1;
}

<div id="bijagos">
  <a href="www..." id="lien-bijagos">
    <img src="www..." id="icone-bijagos">
  </a>
  <p id="texte-bijagos">La géologie des Bijagos</p>
</div>

Answer 1

element.style返回通过元素的style属性应用的内联样式。不是通过CSS类应用的样式。

使用window.getComputedStyle通过任何应用的方式返回元素的当前样式。

var iconeBijagos = document.getElementById("icone-bijagos");
var texteBijagos = document.getElementById("texte-bijagos");
var lienBijagos = document.getElementById("lien-bijagos");

var texteStyle = window.getComputedStyle(texteBijagos);

if (texteStyle.opacity === "0") {
  Hammer(iconeBijagos).on("tap", function(event) {
    lienBijagos.style.pointerEvents = "none";
    texteBijagos.style.opacity = "1";
  });
} else if (texteStyle.opacity === "1") {
  Hammer(iconeBijagos).on("tap", function(event) {
    lienBijagos.style.pointerEvents = "auto";
  });
}

#icone-bijagos {
  position: absolute;
  left: 41%;
  top: 40%;
  width: 2%;
}

#icone-bijagos:hover {
  width: 2.2%;
}

#texte-bijagos {
  position: absolute;
  left: 43.5%;
  top: 37%;
  opacity: 0;
  color: #ff9600;
  font-weight: bold;
}

#bijagos:hover #texte-bijagos {
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  opacity: 1;
}

<div id="bijagos">
  <a href="www..." id="lien-bijagos">
    <img src="www..." id="icone-bijagos">
  </a>
  <p id="texte-bijagos">La géologie des Bijagos</p>
</div>

评论后更新

您将需要使用一个tap处理程序并在其中进行测试

var iconeBijagos = document.getElementById("icone-bijagos");
var texteBijagos = document.getElementById("texte-bijagos");
var lienBijagos = document.getElementById("lien-bijagos");

Hammer(iconeBijagos).on("tap", function(event) {
  var texteStyle = window.getComputedStyle(texteBijagos);

  if (texteStyle.opacity === "0") {
    lienBijagos.style.pointerEvents = "none";
    texteBijagos.style.opacity = "1";
  } else if (texteStyle.opacity === "1") {
    lienBijagos.style.pointerEvents = "auto";
  }

});

我的Hammer.js代码不适用于IF条件

1 个答案: