jQuery：在第一次點擊時更改css背景圖片，然後在下次點擊時更改爲原始圖片等等

Question

我試圖創建一個幻燈片輸出反饋表單，用於在每次點擊時切換圖像。

第一個反饋圖像顯示「反饋+」。我希望用戶點擊此，反饋表單滑出，然後圖像將顯示「反饋 - 」。我已經掌握了這一點，但無法弄清楚如何在用戶想要最小化或再次點擊時獲得「反饋+」。

這裏的HTML：

<div class="slide-out-div"> 
    <a class="handle" href="#"></a> 
    <!-- feedback form goes here --> 
</div> 

CSS：

.handle{ 
width:40px; 
height:141px; 
background-image:url(../images/feedback-plus.png);} 

的jQuery：

<script type="text/javascript">  
    $(function() { 
     $('.handle').click(function() { 
     $(this).css('background-image', 'url(images/feedback-minus.png)'); 
     }); 
    }) 
</script> 

Answer 1

也許是這樣的：

<script type="text/javascript"> 
    $(function() { 
     var backgroundIsPlus = true; 

     $('.handle').click(function() { 
      if (backgroundIsPlus) { 
       $(this).css('background-image', 'url(images/feedback-minus.png)'); 
      } 
      else { 
       $(this).css('background-image', 'url(images/feedback-plus.png)'); 
      } 
      backgroundIsPlus = !backgroundIsPlus; 
     }); 
    }) 
</script> 

Answer 2

類只需添加到您的元素誰更改背景圖片

$(document).ready(function(){ 
 
    $(function() { 
 
    $('.handle').click(function() { 
 
     $(this).toggleClass("feedback-minus"); 
 
    }); 
 
    }) 
 
});

.handle{ 
 
    width:40px; 
 
    height:141px; 
 
    background-image:url(../images/feedback-plus.png); 
 
    color: blue; 
 
} 
 
.handle.feedback-minus{ 
 
    background-image:url(../images/feedback-minus.png); 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="slide-out-div"> 
 
    <a class="handle" href="#">Hello World</a> 
 
    <!-- feedback form goes here --> 
 
</div>