Question

我需要一些jQuery，当用户点击span（在li里面）时，更改该跨度的背景图像，然后在下一次点击时，返回旧的背景图像？

$(document).ready(function () {
    $('.inverse').click(function () {
        if($(this).find('.inverse').attr('id') == 'yes') {
            $(this).find('.inverse').attr('id', '').css('background-image' 'url(...)');
        } else {
            $(this).find('.inverse').attr('id', 'yes').css('background-image' 'url(...)');
        }
    });
});

还有HTML：

                <div class="dynamic">
                <h3>08/25/2014 - All Events</h3>
                    <ul>
                        <li>Time<span class="inverse">Customer</span></li>
                        <li>7 PM<span class="inverse">Customer Name</span></li>
                        <li>9 PM<span class="inverse">Customer Name</span></li>
                        <li>11PM<span class="inverse">Customer Name</span></li>
                    </ul>
</div>

我尝试了这个，但它没有用。

提前致谢。

Answer 1

您可以做的是使用类名（优于ID）来处理更改，然后检查该类是否存在。同时注意使用引号".."和'..'设置background-image。检查此示例：

＆＃13;

$(document).ready(function() {
  $('.inverse').click(function() {
    if (!$(this).hasClass('actin')) {
      $(this).css('background','url("http://lorempixel.com/200/100/sports")');
      $(this).toggleClass('actin');
    } else {
      $(this).css('background','url("http://lorempixel.com/200/100/food")');
      $(this).toggleClass('actin');
    }
  });
});

＆＃13;

span {
  display: inline-block;
  background: url('http://lorempixel.com/200/100/sports') no-repeat;
  padding:15px;
  color:white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dynamic">
  <h3>08/25/2014 - All Events</h3>
  <ul>
    <li>Time<span class="inverse">Customer</span>
    </li>
    <li>7 PM<span class="inverse">Customer Name</span>
    </li>
    <li>9 PM<span class="inverse">Customer Name</span>
    </li>
    <li>11PM<span class="inverse">Customer Name</span>
    </li>
  </ul>
</div>

＆＃13;

修改

此外，如果您想要点击bg，您只需添加一个更改该背景的课程：

＆＃13;
＆＃13;
$(document).ready(function() { $('.inverse').click(function() { $(this).toggleClass('actin'); }); });
＆＃13;
.inverse { display: inline-block; background: url('http://lorempixel.com/200/100/sports') no-repeat; padding:15px; color:white; } .inverse.actin { background: url('http://lorempixel.com/200/100/food') no-repeat; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dynamic"> <h3>08/25/2014 - All Events</h3> <ul> <li>Time<span class="inverse">Customer</span> </li> <li>7 PM<span class="inverse">Customer Name</span> </li> <li>9 PM<span class="inverse">Customer Name</span> </li> <li>11PM<span class="inverse">Customer Name</span> </li> </ul> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

因为您没有向我们展示您尝试过的内容，所以我只解释了这方面的逻辑和一些有用的提示。

首先，要在click中捕获jQuery事件，您可以使用.click函数，该函数也有一个处理程序参数。阅读更多HERE。

因此，第一步是为$('yourspan').click(function(){});等跨度点击添加事件。

第二步：在上面的函数中，您可以编写代码来更改background。您可以使用jQuery功能.css执行此操作。阅读更多http://api.jquery.com/css/。使用css classes可以有更好的替代方法。想一想。

jQuery Span - OnClick更改背景

2 个答案: