Маленькая задачка по jquery

208

18 апреля 2017, 09:30

Сей код должен был существенно облегчить сайт http запросами, так как по желанию клиента в каждом товаре должно крутится до 10 фоток. Решил сделать это фоном, все норм работает только есть один маленький нюанс. В переменной widthImgBox скапливается значение и при клике на другую фотку - оно применяется и там. Вопрос - как сделать чтобы при вызове функции на другом блоке переменная или обнулялась или еще может есть какие-то варианты как это сделать фоном (я новичок если что).

var widthImgBox = 0;
$('.next').on('click', function(){
    var hiddenImg = $(this).siblings().find('.tov-item-img');
    widthImgBox = widthImgBox - 290;
    hiddenImg.css({
    'background-position-x': widthImgBox
    });
    return false;
});
$('.prev').click( function(){
    var hiddenImg = $(this).siblings().find('.tov-item-img');
    widthImgBox = widthImgBox + 290;
    hiddenImg.css({
    'background-position-x': widthImgBox
    });
    return false;
});

Answer 1

$('.next').on('click', function(){ 
    var next = parseInt($(this).css('background-position-x'),10); 
    var widthImgBox = next - 290; 
    $(this).css('background-position-x', widthImgBox).parent(); 
    $(this).parent('.id').css('background-position-x', widthImgBox); 
    alert(widthImgBox); 
    return false; 
}); 
$('.prev').on('click', function(){ 
    var next = parseInt($(this).next('.next').css('background-position-x'),10); 
    $(this).next('.next').css('background-position-x', next+290); 
    var widthImgBox = next+290; 
    $(this).css('background-position-x', widthImgBox).parent();  
    $(this).parent('.id').css('background-position-x', widthImgBox); 
    alert(widthImgBox); 
    return false; 
});

.prev{padding:10px;background:#a3d147;margin-bottom:5px;    display: inline;width:30px;cursor:pointer;} 
.next{padding:10px;background:#ffb28b;margin-bottom:5px;display: inline;width:30px;cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="id"> 
    <p>1 товар:</p>			 
    <li class="prev">prev</li> 
    <li class="next">next</li> 
</div> 
<div class="id"> 
    <p>2 товар:</p> 
    <li class="prev">prev</li> 
    <li class="next">next</li> 
</div> 
<div class="id"> 
    <p>3 товар:</p> 
    <li class="prev">prev</li> 
    <li class="next">next</li> 
</div>

Answer 2

Сделал так:

var ImgBgPosition;
var ThisBg;
$('.next').on('click', function(){
   ImgBgPosition = $(this).siblings().find('.tov-item-img').css("background-position-x");
   ThisBg = $(this).siblings().find('.tov-item-img');
   ImgBgPosition = ImgBgPosition.replace('px','');
   ImgBgPosition = ImgBgPosition - 290;
   ThisBg.css({
      'background-position-x': ImgBgPosition
   });
   return false;
});
$('.prev').on('click', function(){
   ImgBgPosition = $(this).siblings().find('.tov-item-img').css("background-position-x");
   ThisBg = $(this).siblings().find('.tov-item-img');
   ImgBgPosition = ImgBgPosition.replace('px','');
   ImgBgPosition = Number(ImgBgPosition) + 290;
   ThisBg.css({
      'background-position-x': ImgBgPosition
   });
   return false;
});