javascript - 在多个地方使用 javascript 为相同的元素 id 更改 CSS 元素

标签 javascript css html

好吧,通过一些教程和这个网站,我对 html/javascript/css 还很陌生。我正在尝试显示一个按钮,单击该按钮时我使用 css 覆盖图像我调用 javascript 函数将一些信息发送到我的服务器以及用新按钮和图像覆盖替换单击的按钮。这是负责这个的代码片段(我基本上只是来回切换按钮的可见性):

<style type = 'text/css'>
input.btn_follow {
position: absolute;    
right: 2px;
top: 2px;
background-image: url(http://icons.iconarchive.com/icons/icojam/onebit/48/star-100-icon.png); /* 16px x 16px */
 }

input.btn_unfollow {
visibility: hidden;
position: absolute;    
right: 2px;
top: 2px;
background-image: url(http://gologic.com/imagesOld/checkmark%20-%20small.png); 
}

</style>
</head><body>
<script type='text/javascript'>
  function follow(series, status) {

  var xhReq = new XMLHttpRequest();
  var request = "follow.php?series="+series+"&status="+status
  xhReq.open("GET", request, false);
  xhReq.send(null);
  var response = xhReq.responseText;
  var IDyes = "follow_"+series
  var IDno =  "unfollow_"+series
 if (response == 1){

  document.getElementById(IDyes).style.visibility='hidden'
  document.getElementById(IDno).style.visibility='visible'
}
else if (response == 0){
  document.getElementById(IDyes).style.visibility='visible'
  document.getElementById(IDno).style.visibility='hidden'
 }
   else if (response == -1){
    alert("you must first login to use the follow request"); // now following show
 } 
}
</script>

所有这些都有效,但是对于某些元素 ID,它们会在同一 html 页面上出现多次。如果是这种情况,只有元素的第一个实例的可见性会发生变化,其余的则不会。如果他们有相同的 ID,为什么会这样?我怎样才能解决这个问题?这是一个链接,可以在我的网页上查看此操作,以使其更清楚 http://ec2-54-234-192-222.compute-1.amazonaws.com/home.php (有问题的按钮是星星) 任何帮助将不胜感激(如果有一种更清洁的方法来刮掉我所拥有的东西,我已经开始像意大利面条一样开放了!) 谢谢-布伦丹

最佳答案

所以在上面的评论中,ID 应该每页只出现一次!感谢@Jeff shaver 澄清了这一点,我将此归咎于新手

关于javascript - 在多个地方使用 javascript 为相同的元素 id 更改 CSS 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15614592/

相关文章:

javascript - 如何在浏览器中将 octokat.js 与 webpack 一起使用?

css - * :before, *的目的:在没有内容属性的规则之后

css - 页脚在 Bootstrap 模式/ Accordion 中始终可见

css - 将站点复制到另一台服务器后,Magento CSS 未更​​新

javascript - 在 IE9 中将用户指定的文件作为字符串读取

javascript - 当源位于另一个域时,如何更改 IFRAME 高度?

javascript - 从网站打印内容时,如何隐藏显示在文件底部的 URL 地址?

javascript - 是否可以让父元素(相对)填充其绝对定位内容的高度?

javascript - FocusEvent如何判断它是通过鼠标或选项卡触发的

html - 如何在不破坏移动 View 中的导航功能的情况下将特定类应用于导航列表?