1

我的 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 box_one 或 box_two 我希望它们进入活动状态。我打算使用 JQuery 来做到这一点。因此，当单击 box_one 或 box_two 时，图像颜色会发生变化以反映活动状态。

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

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

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

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

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

4

2 回答 2

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');
    }); 
});
于 2013-05-23T18:27:49.460 回答
1

使用类进行交换

    .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);

更新了检查小提琴

于 2013-05-23T18:28:04.847 回答