Question

我的HTML结构是：

   <div class="box_container">
      <a class="box_one entire_sprite_image" href="#"></a>
      <a class="box_two entire_sprite_image" href="#"></a>
    </div>

onclick of box_one或box_two我希望它们进入活动状态。我打算用JQuery来做到这一点。因此，当单击box_one或box_two时，图像颜色会发生变化以反映活动状态。

我不确定如何使用JQuery来执行此操作，因为我没有为每个框使用两个不同的图像，而是使用精灵图像。

我是Jquery的新手，但还是达到了这一点：

(function ($) {
      $(document).ready(function() {
      $(".box_one, .box_two").click(function () {

      });
  });
    })(jQuery);

如何在点击时仍然使用Jquery更改图像，再次单击该图像并在点击其他内容时更改回原始图像？

Answer 1

我的假设是你问如何更改被点击元素的精灵。为此，您需要调整所单击元素的背景位置，如下所示：

$(document).ready(function(){
    $(".box_one, .box_two").click(function () {
        $(this).css('backgroundPosition', '0 -54px'); // replace values with appropriate sprite values
    });
});

请澄清您的用例是否与此不同。

更新：使用活动类并切换它。通过单击其他元素来切换活动类。

<div class="box_container">
      <a class="box_one active" href="#"></a>
      <a class="box_two" href="#"></a>
</div>

$(document).ready(function(){ 
    $(".box_one").click(function () { 
        $(this).toggleClass('active');
    }); 

    $(my_selected_elements).not(".box_one").click(function () { 
        $(this).toggleClass('active');
    }); 
});

Answer 2

使用交换类

    .box_one{
         background : 'imgUrlOne'
    }

    .box_one.swap{
         background : 'imgUrlOneSwap'
    }

    .box_two{
         background : 'imgUrlTwo'
    }

    .box_two.swap{
         background : 'imgUrlTwoSwap'
    }

<div class="box_container">
      <a class="box_one entire_sprite_image" href="#"></a>
      <a class="box_two entire_sprite_image" href="#"></a>
</div>

<强>的Javascript

(function ($) {
      $(document).ready(function() {
      $(".box_one, .box_two").click(function () {
            $(this).hasClass('swap') ? $(this).removeClass('swap')  
                                     : $(this).addClass('swap')
      });
});(jQuery);

更新了检查小提琴

如何在点击时交换图像并在其他地方单击时显示它？

2 个答案: