javascript ile sözde öğe denetimi

Question

Tıklatıldığında tamamen renk değiştiren bir talkbubble stil değiştirmeyi deniyorum. Burada görüldüğü gibi

Ben aslında elemanın geri kalanı ile renklerini değiştirmek için (talkbubble için oka şekillendirmek için ) kullanıyorum :before sözde elemanı almanın bir sorunla karşılaştık:

HTML

<div class="clickables"> 
     <div class="talkbubble"> 
      <input type="hidden" class="tbselector" value="sbselection_1"> 
      <div class="thumbnail"> 
       <img src="images/thumbnail1.png" height="33" width="30" /> 
      </div> 
      <div class="words">Commons</div> 
     </div> 
     <div class="talkbubble"> 
      <input type="hidden" class="tbselector" value="sbselection_2"> 
      <div class="thumbnail"> 
       <img src="images/thumbnail1.png" height="33" width="30" align="middle" /> 
      </div> 
      <div class="words">crossroads</div> 
     </div> 
     . 
     . More and more 
     . 
    </div> 
</div> 

CSS^{Hemen İlgili}

.talkbubble { 
    background: white; 
    color: rgb(0,0,0); 
    height: 40px; 
    margin-top: 1%; 
    margin-left: 48%; 
    margin-right: auto; 
    position: relative; 
    width: 150px;  
} 
.talkbubble:before { 
    border-top: 10px solid transparent; 
    border-right: 10px solid white; 
    border-bottom: 10px solid transparent; 
    content:""; 
    height: 0; 
    position: absolute; 
    right: 100%; 
    top: 10px; 
    width: 0;  
} 
.talkbubble:before.clicked { 
    border-right-color:#666666; 
} 
.talkbubble:hover{ 
    background-color: rgb(194,194,194)!important; 
    color:rgb(255,255,255); 
} 
.talkbubble:hover:before{ 
    border-right-color: rgb(194,194,194)!important; 
} 

JQUERY İşte

$('.clickables').on('click','.talkbubble',function() { 
    $(this).parent().find('.talkbubble').css('background-color','#ffffff'); 
    $(this).css('background-color', '#666666'); 
}); 

biraz araştırma yaptım Demo http://jsfiddle.net/petiteco24601/3xuuq2fx/

olduğunu ve biraz sonuçsuz görünmektedir. Çoğunlukla, bulduklarımın bir kısmı temel olarak, sözde öğenin GERÇEKTEN varolmadığı için, javascript'i sahte bir öğeye zorlamanın bir yolu olmadığını söylüyordu.

Ancak, daha fazla araştırma ile http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ ve Change an HTML5 input's placeholder color with CSS gibi şeylerin bu hataların giderildiğini ve bazı tarayıcılarda sahte öğeler üzerinde javascript kullanması gerektiğini söyleyen şeyler buldum. Asıl anlaşma nedir? Bir kişi, sözde öğeleri nasıl kontrol edebilir?

Answer 1

Gidebileceğiniz yol, yeni bir sınıf eklemek veya kaldırmaktır. Önce CSS üzerinde !important beyanı kaldırmak

• kötü bir uygulamadır ve daha sonra çatışmalı olabilir.

• Sonra istediğiniz değişikliği ile yeni bir sınıf olun:

  jQuery sınıfını eklemek/kaldırmak ile Ardından

  .clicked { 
      background:#666; 
  } 
  .clicked:before { 
      border-right-color:#666; 
  } 
  

• :

  $('.clickables').on('click','.talkbubble',function() { 
      $(this).siblings('.talkbubble').removeClass('clicked'); 
      $(this).addClass('clicked'); 
  }); 
  

Kontrol bu DemoFiddle

Answer 2

Sahte CSS bildirimlerini değiştirebilmemin tek yolu var. <style> etiketlerinin tek tek uygulandıkları öğelerin sınıfıyla ilişkili kimlikleriyle oluşturuldu. I.E.

<style id="talkbubble_style"> 
    .talkbubble:before{ 
    border-right-color:#666666; 
    } 
</style> 

Yani click olayına zaman, stil öğesi almak ve !important seçenek her tanımına eklenen birlikte ne istersen CSS için innerHTML değiştirin. Bunun gibi:

$('.clickables').on('click','.talkbubble',function() { 
    $(this).parent().find('.talkbubble').css('background-color','#ffffff'); 
    $(this).css('background-color', '#666666'); 
    $('#talkbubble_style').html('.talkbubble:before{border-right-color:#666666!important;}'); 
}); 

Answer 3

Yalnızca javascript kullanmadan CSS çözümü arıyorsanız.İşte burada:

Working Fiddle

HTML kodunda bir etiket ve radyo düğmesi ile her liste maddelik bloğu tamamladı. Danko belirtildiği gibi ayrıca !important kaldırıldı

.talkbubble { 
    display: inline-block; 
    /* other styles */ 
} 

:checked + .talkbubble { 
    background-color: #666; 
} 
:checked + .talkbubble:before { 
    border-right-color: #666; 
} 
:checked + .talkbubble:hover:before { 
    border-right-color: #666; 
} 
.clickables input[type="radio"] { 
    position: absolute; 
    visibility: hidden; 
    pointer-events: none; 
} 

..ve: ve CSS içinde ben aşağıdaki kodu eklendi.