Question

我在 elementor 上创建了这段代码，但是当我点击复选框时，图像没有改变，我不明白为什么。我不知道如何使用 jquery，我试图在 html 中插入一些 javascript 代码作为脚本，我想保持这种方式。

input[type="checkbox"] {
  display: none;
  margin
}

#bottone {
  position: relative;
  display: block;
  width: 800px;
  height: 150px;
  background-color: #4A6866;
  border-radius: 350px;
  cursor: pointer;
  transform: scale(0.4);
  margin: 1px auto;
}

#cerchio {
  width: 400px;
  height: 150px;
  background-color: #64C1C6;
  position: relative;
  top: 0px;
  left: 0px;
  border-radius: 290px;
  transition: 0.4s ease left, 0.4s ease background-position;
}

#SOFC-id,
#SOE-id {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
  margin-left: 140px;
  z-index: 1;
  font-weight: bold;
  font-family: 'Source Sans Pro', sans-serif;
}

#SOE-id {
  margin-left: 560px;
}

#scelta-checkbox:checked+#bottone #cerchio {
  left: 400px;
  background-position: -350px 0;
}

.ascondioggetto {
  display: none;
}

.isualizzaoggetto {
  display: block;
}

<input type="checkbox" id="scelta-checkbox" onclick="myFunction1()">

<label id="bottone" for="scelta-checkbox">
  <div id="cerchio"></div>
  <div id="SOFC-id">SOFC</div>
  <div id="SOE-id">SOE</div>
</label>

<script>
  function myFunction1() {
    var checkBox = document.getElementById("scelta-checkbox");
    var div1 = document.getElementById("SOFC-img");
    var div2 = document.getElementById("SOE-img");
    var div3 = document.getElementById("testo-SOE");
    var div4 = document.getElementById("testo SOFC");

    if (checkBox.checked == true) {
      div1.style.display = "block";
      div2.style.display = "none";
      div3.style.display = "block";
      div4.style.display = "none";
    } else {
      div1.style.display = "none";
      div2.style.display = "block";
      div3.style.display = "none";
      div4.style.display = "block";
    }
  }
  
  
<img id="SOFC-img" src="https://via.placeholder.com/300" alt="logo" />

  }
</script>

Answer 1

你需要把 img 标签放在 script 标签之外，你在 js 中放置了 html 图像标签

function myFunction1() {
    var checkBox = document.getElementById("scelta-checkbox");
    var div1 = document.getElementById("SOFC-img");
    var div2 = document.getElementById("SOE-img");
    var div3 = document.getElementById("testo-SOE");
    var div4 = document.getElementById("testo SOFC");

    if (checkBox.checked == true) {
      div1.style.display = "block";
      div2.style.display = "none";
      div3.style.display = "block";
      div4.style.display = "none";
    } else {
      div1.style.display = "none";
      div2.style.display = "block";
      div3.style.display = "none";
      div4.style.display = "block";
    }
  }
  
  


  }

input[type="checkbox"] {
  display: none;
  margin
}

#bottone {
  position: relative;
  display: block;
  width: 800px;
  height: 150px;
  background-color: #4A6866;
  border-radius: 350px;
  cursor: pointer;
  transform: scale(0.4);
  margin: 1px auto;
}

#cerchio {
  width: 400px;
  height: 150px;
  background-color: #64C1C6;
  position: relative;
  top: 0px;
  left: 0px;
  border-radius: 290px;
  transition: 0.4s ease left, 0.4s ease background-position;
}

#SOFC-id,
#SOE-id {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
  margin-left: 140px;
  z-index: 1;
  font-weight: bold;
  font-family: 'Source Sans Pro', sans-serif;
}

#SOE-id {
  margin-left: 560px;
}

#scelta-checkbox:checked+#bottone #cerchio {
  left: 400px;
  background-position: -350px 0;
}

.ascondioggetto {
  display: none;
}

.isualizzaoggetto {
  display: block;
}

<input type="checkbox" id="scelta-checkbox" onclick="myFunction1()">

<label id="bottone" for="scelta-checkbox">
  <div id="cerchio"></div>
  <div id="SOFC-id">SOFC</div>
  <div id="SOE-id">SOE</div>
</label>
<img id="SOFC-img" src="https://via.placeholder.com/300" alt="logo" />

Onclick 复选框不会改变

1 个答案: