嗨，我的jquery代码失败了，有人能帮我调试吗？[关闭]

0lvr5msh 于 2023-02-18 发布在 jQuery

关注(0)|答案(1)|浏览(164)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
6天前关闭。
Improve this question
我正在尝试创建一个旋转木马，其中一个滚动箭头可以在旋转木马中前进，另一个箭头可以反向。我还想添加滚动条，滚动条的颜色会根据箭头是否被单击而改变。也就是说，它的功能与普通的旋转木马类似。
我正在使用Jquery尝试更改滚动条的颜色（本质上是反转它们的颜色），只要单击箭头表明carousel已经滚动了一个周期。
代码：

var cube = document.getElementById("proceedsecond")
var dottyuno = document.getElementById("dotone")
var dottydos = document.getElementById("dotwo")

cube.addEventListener("click", function() {
  dottyuno.style.backgroundColor = "#EDEDEB!important";
})
cube.addEventListener("click", function() {
  dottydos.style.backgroundColor = "#3A2B2E!important";
})

var pyramid = document.getElementById('backfirst')
var dottyuno = document.getElementById('dotone')
var dottydos = document.getElementById('dottwo')

pyramid.addEventListener("click", function() {
  dottyuno.style.backgroundColor = "#3A2B2E!important";
})
pyramid.addEventListener("click", function() {
    dottydos.style.backgroundColor = "#EDEDEB!important";
  })

.containery {
  padding: 20px;
  margin: 10px auto 20px auto;
  max-width: 68px;
}

.dot {
  background-color: #EDEDEB;
  border: 1px solid #EDEDEB;
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.dot.active {
  background-color: #3A2B2E;
}

.scroller {
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: #fff;
  color: #3B2B2F;
  border-radius: 6px;
  box-shadow: 1px 2px 4px 0 rgba(89, 89, 89, 0.5);
  font-size: 24px;
  height: 52px;
  justify-content: center;
  transition: 0.3s all;
  width: 52px;
  z-index: 1!important;
}

<label id="proceedsecond" class="scroller--forward">❯ </label>
<label id="backfirst" class="scroller--backward">❮</label>
<div class="containery">
  <span id="dotone" class="dot active"></span>
  <span id="dottwo" class="dot"></span>
</div>

jquery

来源：https://stackoverflow.com/questions/75424421/hi-my-jquery-code-is-failing-can-someone-please-help-me-debug

1条答案

按热度按时间

6l7fqoea1#

尝试删除设置背景色的“！important”修饰符。要查看它的工作情况，请按“Run Code Snippit”（我将您的代码 Package 在html-bed中，使其在snippit工具中运行-您可以删除它。）

<html>
<head></head>
<body>
<style>
  .containery {
    padding: 20px;
    margin:10px auto 20px auto;
    max-width:68px;
  }

  .dot {
    background-color: #EDEDEB;
    border: 1px solid #EDEDEB;
    border-radius: 5px;
    display: inline-block;
    height: 10px;
    width: 10px;
  }

  .dot.active {
    background-color: #3A2B2E;
  }

  .scroller {
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #3B2B2F;
    border-radius: 6px;
    box-shadow: 1px 2px 4px 0 rgba(89, 89, 89, 0.5);
    font-size: 24px;
    height: 52px;
    justify-content: center;
    transition: 0.3s all;
    width: 52px;
    z-index: 1!important;
  }
</style>
<label id="proceedsecond" class="scroller--forward" >❯ </label>
<label id="backfirst" class="scroller--backward">❮</label>
<div class="containery">
  <span id="dotone" class="dot active"></span>
  <span id="dottwo" class="dot"></span>
</div>
<script>
    var cube = document.getElementById("proceedsecond")
    var dottyuno = document.getElementById("dotone")
    var dottydos = document.getElementById("dotwo")

    cube.addEventListener("click", function() { dottyuno.style.backgroundColor = "#EDEDEB";})
    cube.addEventListener("click", function() { dottydos.style.backgroundColor = "#3A2B2E";})

    var pyramid = document.getElementById('backfirst')
    var dottyuno = document.getElementById('dotone')
    var dottydos = document.getElementById('dottwo')

    pyramid.addEventListener("click", function() { dottyuno.style.backgroundColor = "#3A2B2E";})
    pyramid.addEventListener("click", function() { dottydos.style.backgroundColor = "#EDEDEB";})
</script>
</body>
</html>

赞(0）回复(0）举报 2023-02-18

我来回答

嗨，我的jquery代码失败了，有人能帮我调试吗？[关闭]

1条答案

相关问题

热门标签

最新问答