Question

我想创建一个简单的切换图像控件，可在选中或取消选中时更改图像。我试图为它创建一个单独的类，因为我打算添加一个监听器来响应切换状态的变化，这似乎是一个很好的解决方案。 toggleImages的数量取决于用户，因此我尝试使用js创建它们。

＆＃13;

<html>
  <head>

    
  </head>
  <body>

    <div id="box">

    </div>

  </body>
  <script>
      class ToogleImage{
        constructor(imgToggled, imgNotToggled, img){
          this.toggled = false;
          this.imgToggled = imgToggled;
          this.imgNotToggled = imgNotToggled;
          this.img = img;
          this.refreshImage();
          this.img.addEventListener('click', function (e) {
            this.toggleState();
            this.refreshImage();
          });
        }
           toggleState(){
            this.toggled!=this.toggled();
          }
           refreshImage(){
            if(this.toggled){
              img.setAttribute('src', this.imgToggled);

            }else{
              img.setAttribute('src', this.imgNotToggled);
            }
          }

      }

      var img = document.createElement("img");
      var toggleImage = new ToogleImage("https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded", "https://www.stackoverflowbusiness.com/hubfs/B2B-SO/images/SO_Talent.svg?t=1515694040462", img);
      document.getElementById('box').appendChild(img)
    </script>

</html>

＆＃13;

问题是图像不会显示。有谁知道如何解决这个问题？

Javascript切换图像源

0 个答案: