Question

上面是一个小提琴，我想切换或显示/隐藏背景图像（即刻度线）onclick，并在数据库（mysql）中选择以下提议。我能够显示刻度线但不能隐藏它。请帮忙。

$(function() {
 $('.listing-content').click(function() {
  $(this).css('background-image', 'url(http://i.stack.imgur.com/Kg1Do.png)');
 });
})

当点击listing-content元素时，我还需要其他listing-content元素来删除背景图片吗？那么一次只勾选一个？

Answer 1

点击.listing-content点击，执行以下命令：

$(document).on('click', '.listing-content', function() {
  $('.listing-content').css('background-image', '');
  $(this).css('background-image', 'url(http://i.stack.imgur.com/Kg1Do.png)');
});

或

$('.listing-content').removeAttr('style'); //removes all inline css

Answer 2

您需要一个控件来检查是否设置了CSS图像。在这里查看演示：https://jsfiddle.net/kpsbbjk4/

$(function() {
 $('.listing-content').click(function() {

 //this code to control and untick current clicked item if it is ticked
 if ($(this).css('background-image')=='url("http://i.stack.imgur.com/Kg1Do.png")'){
  $(this).css('background-image', '');

 }else{
  //this code to remove all css images so that new item get ticked
 $('.listing-content').css('background-image', '');

  $(this).css('background-image', 'url("http://i.stack.imgur.com/Kg1Do.png")'); 
  }

 });
})

背景图像仅在单个图像上切换

2 个答案: