Блог

Я очень новичок в Jquery, поэтому, пожалуйста, извините за этот вопрос. Я пытаюсь поменять фоновое изображение <h1> элемента, когда пользователь нажимает на соответствующую гиперссылку. <a> Теги генерируются динамически, и их может быть «n» в любое время в зависимости от того, сколько изображений задано в таблице SQL.

Мой HTML:

 <div id="feature-image">
    <h1><span>A random heading</span></h1>
</div>

<div id="feature-links">
    <a class="a1" href="#">1</a>
    <a class="a2" href="#">2</a>
    <a class="a3" href="#">3</a>
</div>
  

<span> Теги настроены на отображение: нет

Я написал этот оператор Jquery для запуска, когда пользователь нажимает на гиперссылку в разделе #feature-links. Я пытался присвоить image переменной имя <a> класса тегов (a1, a2, a3) и т. Д., А Затем изменить свойство фонового изображения CSS <h1> image , используя var как часть .jpg. URL.

 <script>
$(function(){
    $('#feature-links a').click(function(){
        var image = $(this).attr("class","");
        $('#feature-image h1').css('background-image','url=('main_'   image   '.jpg')');
    });
});
</script>
  

все мои изображения имеют имена «main_a1.jpg «, «main_a2.jpg » и так далее…

Я не вижу, что я делаю не так или что я пытаюсь сделать (захватить имена классов и т. Д. в vars) на самом деле является хорошей практикой или нет … некоторая помощь была бы очень признательна.

Заранее спасибо!

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

Код Jquery после редактирования:

 $(function(){
    $('#feature-links a').click(function(){
        var image = $(this).attr('class');
        $('#feature-image h1').css('background-image','url(images/main_'   image   '.jpg)');
    });             
});
  

Измените строку на:

 var image = $(this).attr("class");
  

Я считаю, что указание 2 параметров .attr() функции используется для изменения значения атрибута. Поэтому в вашем случае это изменило бы класс на "" .

Указание одного параметра вернет значение класса

Лучшим способом вместо использования класса было бы установить href .

Например:

 $('#feature-links a').click(function(e){

    $('#feature-image h1').css({
        'background-image': 'url('   $(this).attr('href')   ')'
    });

    e.preventDefault(); // Stops the standard link behaviour

});
  

Тогда ваши ссылки будут просто ссылаться непосредственно на фоновое изображение:

 <a href="/path/to/image.jpg">1</a>
  

Надеюсь, это поможет 🙂