jQuery Span - OnClick Change Background

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. Проверьте этот пример:

$(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'); 
 
    } 
 
    }); 
 
});

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

<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>

---

Редактировать

Кроме того, если вы этого нужно просто хотите обрабатывать на нажмите bg вы можете просто добавить класс изменения этого фона:

$(document).ready(function() { 
 
    $('.inverse').click(function() { 
 
     $(this).toggleClass('actin'); 
 
    }); 
 
});

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

<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>

Answer 2

Поскольку вы не показали нам, что вы пробовали, я объясняю только логику этого и некоторые полезные советы.

Прежде всего, чтобы поймать событие click в jQuery, вы можете использовать функцию .click, которая также имеет параметр обработчика. Подробнее HERE.

Итак, первым шагом является добавление события для выбора диапазона, например $('yourspan').click(function(){});.

Второй шаг: Внутри функции выше вы можете написать свой код для изменения background. Вы можете сделать это с помощью jQuery, используя функцию .css. Подробнее http://api.jquery.com/css/. Существует намного лучшая альтернатива этому, используя css classes. Думаю об этом.