Question

我有这两个图像的这些特征

#image1{
     position:absolute;
    left:29%;
    top:40%;
    background-image: url("../imgdrag/activity1.png");
    width:63px;
    height:38px;
}
#image2{
     position:absolute;
    left:29%;
    top:40%;
    background-image: url("../imgdrag/activity1red.png");
    width:63px;
    height:38px;
}

当我使用函数

单击按钮时，如何用image2替换image1

Answer 1

// this with jQuery
$("#button").click(function() {
    $('#image1').attr('id', '#image2');
});

或

function change(){
    document.getElementById('#image1').setAttribute('id', '#image2');
}

Answer 2

使用jQuery切换状态的示例

＆＃13;

$('.replace').click(function(){
  
  $('.image-holder').toggleClass('active');

})

＆＃13;

#image1{
     position:absolute;
    left:29%;
    top:40%;
    background-image: url("../imgdrag/activity1.png");
    width:63px;
    height:38px;
    z-index: 2;
    background-color: blue;
}
#image2{
     position:absolute;
    left:29%;
    top:40%;
    background-image: url("../imgdrag/activity1red.png");
    width:63px;
    height:38px;
    z-index: 1;
    background-color: red;
}
.image-holder {
 position: relative;
}
.image-holder.active #image2{

   z-index: 3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="replace">Replace</button>

<div class="image-holder">

 <div id="image1"></div>
 <div id="image2"></div>

</div>

＆＃13;

Answer 3

我建议将你的css改为


    #image1 {
        position:absolute;
        left:29%;
        top:40%;
        background-image: url("../imgdrag/activity1.png");
        width:63px;
        height:38px;
    }

    #image1.active {
        background-image: url("../imgdrag/activity1red.png");
    }

然后，如果您使用jquery，只需添加新的“活动”类，并记住首先检查它是否已经拥有它。


    $('button').on('click', function(e) {
      var img = $('#image1');
      if (!img.hasClass('active')) {
        img.addClass('active');
      }
    });

如何用另一个onclick替换图像

3 个答案: