[CSS] nadanie wartości elementowi wyżej Opcje

[lustfingers]

Witam mam taką strukturę kontenerów, i jest ich kilkanaście identycznych w układzie

[HTML] pobierz, plaintext 
<label>
<li class="vir">
 <div class="radio">
  <span class=""><input type="radio" class="attribute_radio" name="group_4" value="34"></span>
 </div>
</li>
</label>
[HTML] pobierz, plaintext 

Gdy jeden z nich zostanie zaznaczony do span dochodzi klasa checked:

[HTML] pobierz, plaintext 
<label>
<li class="vir">
 <div class="radio">
  <span class="checked"><input type="radio" class="attribute_radio" name="group_4" value="34"></span>
 </div>
</li>
</label>
[HTML] pobierz, plaintext 

Teraz dla tego właśnie kontenera <li class="vir"> w którym jest zaznaczony <span class="checked"> chce nadać inne tło. Czy jest to możliwe w css? Czy potrzebuje jakiś kod js który to obsłuży?

[viking]

W css nie jest to możliwe. W js musisz wyszukać element nadrzędny i go odpowiednio formatować.

[trueblue]

Zmień trochę strukturę i użyj: https://css-tricks.com/almanac/selectors/c/checked/

[lustfingers]

Generalnie nie za bardzo mogę zmienić układ, ogólnie ten span pojawia się automatycznie w kodzie, w samej strukturze pliku go nie ma więc jakiś skrypt go ładuje ale nie potrafie namierzyć gdzie on jest. Poza tym chyba jak bym namierzył to i tak w innym miejscu na stronie ta funcjonalność musi pozostać nie zmieniona, więc jak zjeśc ciastko i mieć ciastko

Za chwilę przeglądne link który podałeś, tymczasem przy okazji mógłby ktoś podesłać jakiś przykład js który pozwoli mi obsłużyć takie działanie, albo pod jaką nazwą szukać w googlu?

Ten post edytował lustfingers 9.11.2016, 09:09:29

[viking]

https://jsfiddle.net/ao4wwwh1/

Jeśli masz jakiś framework typu jquery to parents() / parent()

[lustfingers]

Kod który podałeś umieściłem tak:

[HTML] pobierz, plaintext 
<script type="text/jscript">
$(function() {
  var x =document.querySelectorAll('span.checked');
[].forEach.call(x, function(span) {
  span.parentElement.parentElement.classList.add('test');
});
});
</script>
[HTML] pobierz, plaintext 

Podczas ładowania strony domyślnie jeden element ma klasę checked i tam faktycznie jest dopisywana klasa "test", natomiast gdy zaznaczę inny element to nie ma żadnego zdarzenia które by usuwało klasę z tego li i dodawało do nowo zaznaczonego.

EDYCJA

Dostałem kilka kodów które powinny działać ale nie działają, wydaje mi sie że mają coś z klasami namieszane ale nie mogę dojść z tym ładu,w oryginale te kody któe dostałem wyglądają tak:

[HTML] pobierz, plaintext 
$(function() {
  $('span.checked input').change(function() {
    var x = document.querySelectorAll('span');
    [].forEach.call(x, function(span) {
      if (span.parentElement.parentElement.classList.contains('checked')) { // check if li has class
        span.parentElement.parentElement.classList.remove('checked'); // remove class test from li
      }
    });
    this.parentElement.parentElement.parentElement.classList.add('test');
  }).change(); // .change will run for the 1st time when page loads
});
[HTML] pobierz, plaintext 

kolejny to:

[HTML] pobierz, plaintext 
$(function() {
  $('span.checked input').change(function() {
    var x = document.querySelectorAll('li.vir');
    [].forEach.call(x, function(li) {
      if (li.contains('checked')) { // check if li has class
        li.classList.remove('checked'); // remove class test from li
      }
    });
    this.parentElement.parentElement.parentElement.classList.add('test');
  }).change(); // .change will run for the 1st time when page loads
});
[HTML] pobierz, plaintext 

i trzeci:

[HTML] pobierz, plaintext 
$(function() {
  $('span.checked input').change(function() {
    $('li.vir').removeClass('test'); //remove class test from li
    $(this).closest('li').addClass('test'); // add class test to li
  }).change(); // .change will run for the 1st time when page loads
});
[HTML] pobierz, plaintext 

EDYCJA 2

Mam działające rozwiązania które u mnie nie działają. Pytanie dlaczego to może u mnie nie działać?

Tutaj dwa teoretycznie działające rozwiązania, które u mnie nie ruszają:
https://jsfiddle.net/ukbgqn1c/4/
https://jsfiddle.net/ukbgqn1c/3/

Ten post edytował lustfingers 9.11.2016, 19:30:25

[viking]

Zobacz w konsoli jakie masz błędy. I używasz jquery tak do wiadomości.

[lustfingers]

W konsoli nie mam błędów z tym związanych, jquery jest ładowane to jest PrestaShop i hederze są ładowane skrypty, tym bardziej ze to strona produktu więc musi być, teraz zmieniłem kod na:

[HTML] pobierz, plaintext 
jQuery(document).ready(function() {
  $('span input:radio').change(function() {
    if (this.checked) { // if radio button is checked
      $('li.vir').removeClass('test'); //remove class test from li
      $(this).closest('li').addClass('test'); // add class test to li
    }
  }).change(); // .change will run for the 1st time when page loads
});
[HTML] pobierz, plaintext 

więc tym bardziej w konsoli pokazało by mi że nie ma jquery.

Ten post edytował lustfingers 9.11.2016, 20:04:50

[trueblue]

https://jsfiddle.net/ukbgqn1c/5/

[lustfingers]

To jest to, dzięki.