Show/Hide Issue with Image Rotator

Question

Я работаю над сайтом с ротатором изображений (с помощью jQuery Roundabout). Я поставил его в JQuery, что при нажатии на изображение, он отображает определенное содержание, связанное с этим изображением, используя следующий код:

$('#brand-cou').click(function() { 
    $('#brand-details .detail-section').fadeOut(0); 
    $('#detail-country-squire').fadeIn("slow"); 
    return false; 
    }); 

Где # бренд-Коу является литий, содержащий изображение и # detail- country-squire - это раздел, который я хочу показать. Это отлично работает, ожидайте, что у меня также будет следующая и предыдущая стрелка, что является альтернативным способом перемещения людей вокруг ротатора изображений. У меня сложнее всего получить правильный текст, чтобы показать, когда они продвигаются вокруг ротатора, используя эти элементы управления. Это код, у меня сейчас:

$('a#next').click(function() { 
    if ('li'.id = 'brand-cou' && 'li'.hasClass('roundabout-in-focus') { 
     //Do what I need to do 
    } 
    }); 

Когда изображение фронтального изображения, он автоматически получает класс «.roundabout-в фокусе». Я думал, что я могу использовать оператор if для каждого конкретного изображения, чтобы сказать, имеет ли он идентификатор A, а также класс .roundabout-in-focus, а затем отображает конкретный текст A. По какой-то причине это не работает. Это также кажется довольно длинным, потому что для каждого изображения мне нужен весь код выше, а также предыдущий раздел кнопки, аналогичный следующему разделу. Итак, в краткосрочной перспективе я хотел бы немного помочь выяснить, почему мое заявление выше, не работает. Если кто-то чувствует себя очень щедро, я хотел бы помочь любой мысли о том, как сконденсировать этот код. Мне кажется, что если бы я мог просто сказать, что если у li есть и этот конкретный идентификатор и класс round-out-in-focus, тогда покажите этот текст (который затем должен работать, нажимаете ли вы на изображение или на следующую/предыдущую кнопку) , Моя единственная проблема заключается в том, как написать это, не связывая его с функцией щелчка или чем-то еще, что делает его слишком специфичным для охвата всех трех параметров.

Спасибо за помощь!

Answer 1

@JapanPro, обязательно. Вот html. Помогает ли это ?:

<ul id="thumbs-brands"> 
    <li id="brand-qua"><a href="#"><img src="../assets/brand-quality-care.png"></a></li> 
    <li id="brand-pro"><a href="#"><img src="../assets/brand-propet.png"></a></li> 
    <li id="brand-cou"><a href="#"><img src="../assets/brand-country-squire.png"></a></li> 
    <li id="brand-big"><a href="#"><img src="../assets/brand-big-red.png"></a></li> 
    <li id="brand-lil"><a href="#"><img src="../assets/brand-lil-red.png"></a></li> 
    <li id="brand-joy"><a href="#"><img src="../assets/brand-joy.png"></a></li> 
    <li id="brand-joypro"><a href="#"><img src="../assets/brand-joy-professional.png"></a></li> 
    <li id="brand-sma"><a href="#"><img src="../assets/brand-small-animal.png"></a></li> 
</ul> <!-- end of thumbs-brands --> 

<div id="thumb-navigation"> 
    <a href="#" id="next">Next</a> 
    <a href="#" id="previous">Previous</a> 
</div>   

<div id="brand-details"> 
    <div id="detail-country-squire" class="detail-section"> 
      //Content Here 
    </div> <!-- end of .detail-body --> 
</div> <!-- end of detail-pro-pet -->