2015-04-11 3 views
-1

Я пытаюсь скрыть img с идентификатором «предложения», если li id ​​«print» имеет класс frame3. frame3 - это класс, который добавлен к переднему слайду на карусели, над которой я работаю. Кажется, я получил работу, если я использую только класс. Однако, когда я совмещаю его с идентификатором, нет кубиков. Цените любую помощь ... большое спасибо!jQuery, если div id имеет класс, скрыть другой div

Вот что я работаю.

Markup:

<div class="main-container" style="position:relative;"> 
     <ul id="slider"> 
      <li><img src="images/img-1.png"><span><img src="images/slide-1-text.png"></span></li> 
      <li><img src="images/img-2.png"><span><img src="images/slide-2-text.png"></span></li> 
      <li><img src="images/img-3.png"><span><img src="images/slide-3-text.png"></span></li> 
      <li><img src="images/img-4.png"><span><img src="images/slide-4-text.png"></span></li> 
      <li><img src="images/img-5.png"><span><img src="images/slide-5-text.png"></span></li> 
      <li><img src="images/img-6.png"><span><img src="images/slide-6-text.png"></span></li> 
      <li><img src="images/img-7.png"><span><img src="images/slide-7-text.png"></span></li> 
      <li><img src="images/img-8.png"><span><img src="images/slide-8-text.png"></span></li> 
      <li><img src="images/img-9.png"><span><img src="images/slide-9-text.png"></span></li> 
      <li><img src="images/img-10.png"><span><img src="images/slide-10-text.png"></span></li> 
      <li><img src="images/img-11.png"><span><img src="images/slide-11-text.png"></span></li> 
      <li><img src="images/img-12.png"><span><img src="images/slide-12-text.png"></span></li> 
      <li id="print" class="frame3"><img src="images/US_img-13-preview.png"><span><a class="button" rel="print" href="#">Print</a></span></li> 
     </ul> 

     <img id="prev" src="images/previous.png" onclick="slider_previous()"/> 
     <img id="next" src="images/next.png" onclick="slider_next()"/> 
     <img src="images/offer.png" id="offer" onclick="slider_goto(13); return false"/> 
    </div> 

JQuery:

$(document).ready(function(){ 
    if($("#print").hasClass("frame3") == true) { 
     $("#offer").hide(); 
    }  
}); 
+1

Примечание: вам не нужно это '== true'. – melancia

+1

Это работает для меня: http://jsfiddle.net/o445nmq2/ – Jason

+1

Он работает уже, но вам нужно только это: '$ ('# offer'). Toggle ($ ('# print'). HasClass ('frame3 ')); ' – melancia

ответ

0

Я понимаю, что вы запросили ответ в JQuery, но для полноты картины, я думал, что выписывать эквивалентный ответ в Javascript ,

Вы можете определить 2 DOM узлы с которыми вы работаете:

var printListItem = document.getElementById('print'); 
var offerImage = document.getElementById('offer'); 

Затем вы можете выполнить простое if, then заявление:

if (printListItem.className === 'frame3') { 
offerImage.style.display = 'none'; 
} 

Собираем все это вместе:

function hideOfferImage() { 
    var printListItem = document.getElementById('print'); 
    var offerImage = document.getElementById('offer'); 
    if (printListItem.className === 'frame3') { 
    offerImage.style.display = 'none'; 
    } 

window.onload = hideOfferImage(); 
Смежные вопросы