使用onclick更改div內容

Question

所以我已經被這個問題困擾了幾個小時了……實際上已經差不多一天了。

請看看我為這個問題做了的jsfiddle

因此，我要在這里實現的是更改單擊和選擇箭頭時顯示的圖像。 我希望他們改變成這個

但這顯然沒有發生。 目前，背景圖片正在顯示，但顯示在按鈕的背面。 我想要的是顯示一個新按鈕/圖像，該按鈕將顯示或覆蓋舊按鈕

這是js

$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});

HTML

  <div style="float: left;">
   <div class="step_wrapper">
    <div class="step_box" onclick="show('Page2');">  
   <a href="#"><span class="RectW"><img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" ></span></a> 
  </div>
    </div></div>


  <div style="float: left;">
   <div class="step_wrapper">
    <div class="step_box" onclick="show('Page2');">  
   <a href="#"><span class="RectW"><img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" ></span></a> 
    </div>
    </div></div>

和CSS，您可以看一下小提琴:)

Answer 1

 <div style="float: left; width:400px;">
 <div class="step_wrapper">
 <a class="step_box" onclick="show('Page2');"><img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" ></a> 
</div>

 <div class="step_wrapper">

 <a class="step_box"><img src="http://i59.tinypic.com/2lcvjlz.png" width="25" height="25" ></span></a> 

  </div></div>


.step_wrapper{
    display:inline;
    width: 25px;
    height: 25px;
}

.step_box {

}

.selected{
    /*background: black;*/
}


.PointWHover{
    display: none;
}

.PointWHover  .notch {
    position: absolute;
top: -7px;
left: 2px;
margin: 0;
border-top: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #676767;
padding: 0;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
_border-right-color: pink;
_border-left-color: pink;
_filter: chroma(color=pink);
}

a:hover + .PointWHover {
    display: inline;
background: none repeat scroll 0% 0% #676767;
padding: 5px;
top: 35px;
left: 4px;
color: #FFF;
position: absolute;
font-family: Arial;
font-size: 12px;
font-weight: bold;
}




  $('.step_wrapper').on('click','.step_box',function () {

    var url = $(this).find( "img" ).attr( "src","http://ij-plugins.sourceforge.net/vtk-examples/SimpleCone.jpg");
      alert(url);

    $('.step_box').removeClass('selected');
    $(this).addClass('selected')
});

Answer 2

嘗試這個

$('.step_wrapper').on('click','.step_box',function () {
    //your code here
    $(this).find("img").attr("src","your url here");

});

Answer 3

您不應更改div的背景，而應在單擊圖像時通過更改其來源來處理圖像本身。 為您制作了新的提琴，以便您可以看到演示

 $('.arrow').on('click', function () {
      $('.arrow').attr('src','http://i59.tinypic.com/2lcvjlz.png');
      $(this).attr('src', 'http://i62.tinypic.com/2vb8kn8.png')
  });

為此，請給您的圖像一個名為arrow的類-> class="arrow"

Answer 4

試試這個：- 演示

在CSS中替換

.selected{
    background: url("http://i62.tinypic.com/2vb8kn8.png");
    z-index:99999;
}

用

.selected{
    background: url("http://i62.tinypic.com/2vb8kn8.png");
    z-index:99999;
    height:25px;
    width:25px'
}

而這在jQuery中

$('.step_wrapper').on('click','.step_box',function () {
    $('.step_box').removeClass('selected');
    $(this).addClass('selected')
});

用

$('.step_wrapper').on('click','.step_box',function () {
    $('.step_box').removeClass('selected');
    $('.step_box img').fadeIn('fast');
    $(this).addClass('selected');
    $(this).find('img').fadeOut('fast');
});

Answer 5

您可以添加一些CSS以隱藏圖像。

.selected img {
    opacity: 0;
}

分叉的JSFiddle

Answer 6

您需要做的是

$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
  $(this).find("img").animate({opacity : 0},10)
$(this).addClass('selected')
});

演示

Answer 7

你怎么樣交換圖像的來源

  $('.step_wrapper').on('click','.step_box',function () {

  $('.step_box img').attr('src','http://i59.tinypic.com/2lcvjlz.png');
      $(this).find('img').attr('src','http://i.stack.imgur.com/0e6C3.png');

});

更新演示區