БЛОГ НА HUSL


Ошибка в валидаторе кода web

Автор вопроса: PETPOVICH

Див айдишки дублируются подскажите пожалуйста как исправить ошибку

{literal}
<script>
function show_s1_{/literal}{$us.id}{literal}()
{
document.getElementById('s1_{/literal}{$us.id}{literal}').style.display='block';
document.getElementById('s2_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s3_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s4_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s5_{/literal}{$us.id}{literal}').style.display='none';
}
//----------------
function show_s2_{/literal}{$us.id}{literal}()
{
document.getElementById('s1_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s2_{/literal}{$us.id}{literal}').style.display='block';
document.getElementById('s3_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s4_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s5_{/literal}{$us.id}{literal}').style.display='none';
}
//----------------
function show_s3_{/literal}{$us.id}{literal}()
{
document.getElementById('s1_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s2_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s3_{/literal}{$us.id}{literal}').style.display='block';
document.getElementById('s4_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s5_{/literal}{$us.id}{literal}').style.display='none';
}
//----------------
function show_s4_{/literal}{$us.id}{literal}()
{
document.getElementById('s1_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s2_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s3_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s4_{/literal}{$us.id}{literal}').style.display='block';
document.getElementById('s5_{/literal}{$us.id}{literal}').style.display='none';
}
//----------------
function show_s5_{/literal}{$us.id}{literal}()
{
document.getElementById('s1_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s2_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s3_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s4_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s5_{/literal}{$us.id}{literal}').style.display='block';
}

///////////////////////////////////////////////////

function hide_s1_{/literal}{$us.id}{literal}(){
document.getElementById('s1_{/literal}{$us.id}{literal}').style.display='block';
document.getElementById('s2_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s3_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s4_{/literal}{$us.id}{literal}').style.display='none';
document.getElementById('s5_{/literal}{$us.id}{literal}').style.display='none';
}


function process_{/literal}{$us.id}{literal}() {
    if ( rateDoc.readyState != 4 ) return ;
    document.getElementById("small_rate_{/literal}{$us.id}{literal}").innerHTML = rateDoc.responseText ;    
    }
     var rateDoc = null ;    
     function load5_{/literal}{$us.id}{literal}()
     {       
        if (typeof window.ActiveXObject != 'undefined' ) {
          rateDoc = new ActiveXObject('Microsoft.XMLHTTP');
          rateDoc.onreadystatechange = process_{/literal}{$us.id}{literal} ;
        }
        else {
          rateDoc = new XMLHttpRequest();
          rateDoc.onload = process_{/literal}{$us.id}{literal} ;
        }   
        rateDoc.open( 'GET', '/ajax_page/ajax_users_rate.php?id={/literal}{$us.id}{literal}&task=plus_rate&rate=5', true );     
        rateDoc.send( null ); 
        }       
      function load4_{/literal}{$us.id}{literal}() {
        if (typeof window.ActiveXObject != 'undefined' ) {
          rateDoc = new ActiveXObject('Microsoft.XMLHTTP');
          rateDoc.onreadystatechange = process_{/literal}{$us.id}{literal} ;
        }
        else {
          rateDoc = new XMLHttpRequest();
          rateDoc.onload = process_{/literal}{$us.id}{literal} ;
        }
        rateDoc.open( 'GET', '/ajax_page/ajax_users_rate.php?id={/literal}{$us.id}{literal}&task=plus_rate&rate=4', true );     
        rateDoc.send( null );
      }   
      function load3_{/literal}{$us.id}{literal}() {
        if (typeof window.ActiveXObject != 'undefined' ) {
          rateDoc = new ActiveXObject('Microsoft.XMLHTTP');
          rateDoc.onreadystatechange = process_{/literal}{$us.id}{literal} ;
        }
        else {
          rateDoc = new XMLHttpRequest();
          rateDoc.onload = process_{/literal}{$us.id}{literal} ;
        }
        rateDoc.open( 'GET', '/ajax_page/ajax_users_rate.php?id={/literal}{$us.id}{literal}&task=plus_rate&rate=3', true );  
        rateDoc.send( null );
      }   
      function load2_{/literal}{$us.id}{literal}() {
        if (typeof window.ActiveXObject != 'undefined' ) {
          rateDoc = new ActiveXObject('Microsoft.XMLHTTP');
          rateDoc.onreadystatechange = process_{/literal}{$us.id}{literal} ;
        }
        else {
          rateDoc = new XMLHttpRequest();
          rateDoc.onload = process_{/literal}{$us.id}{literal} ;
        }
        rateDoc.open( 'GET', '/ajax_page/ajax_users_rate.php?id={/literal}{$us.id}{literal}&task=plus_rate&rate=2', true );  
        rateDoc.send( null );
      }   
      function load1_{/literal}{$us.id}{literal}() {
        if (typeof window.ActiveXObject != 'undefined' ) {
          rateDoc = new ActiveXObject('Microsoft.XMLHTTP');
          rateDoc.onreadystatechange = process_{/literal}{$us.id}{literal} ;
        }
        else {
          rateDoc = new XMLHttpRequest();
          rateDoc.onload = process_{/literal}{$us.id}{literal} ;
        }
        rateDoc.open( 'GET', '/ajax_page/ajax_users_rate.php?id={/literal}{$us.id}{literal}&task=plus_rate&rate=1', true );     
        rateDoc.send( null );
}
</script>
{/literal}


<div class="mt-3 mb-3" style='width:100px; height:auto;'>

<div id='s1_{$us.id}'>
    <div id='div_s1' onmouseover='show_s1_{$us.id}();' onclick='load1_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s2' onmouseover='show_s2_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s3' onmouseover='show_s3_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s4' onmouseover='show_s4_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s5' onmouseover='show_s5_{$us.id}();'>&nbsp;&nbsp;</div>
    <img src='/images/stars/s1.png' alt='s1' class='' width='100'/>
</div>

<div id='s2_{$us.id}' style='display:none;'>
    <div id='div_s1' onmouseover='show_s1_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s2' onmouseover='show_s2_{$us.id}();' onclick='load2_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s3' onmouseover='show_s3_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s4' onmouseover='show_s4_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s5' onmouseover='show_s5_{$us.id}();'>&nbsp;&nbsp;</div>
    <img src='/images/stars/s2.png' alt='s2' class='' width='100'/>
</div>

<div id='s3_{$us.id}' style='display:none;'>
    <div id='div_s1' onmouseover='show_s1_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s2' onmouseover='show_s2_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s3' onmouseover='show_s3_{$us.id}();' onclick='load3_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s4' onmouseover='show_s4_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s5' onmouseover='show_s5_{$us.id}();'>&nbsp;&nbsp;</div>
    <img src='/images/stars/s3.png' alt='s3' class='' width='100'/>
</div>

<div id='s4_{$us.id}' style='display:none;'>
    <div id='div_s1' onmouseover='show_s1_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s2' onmouseover='show_s2_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s3' onmouseover='show_s3_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s4' onmouseover='show_s4_{$us.id}();' onclick='load4_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s5' onmouseover='show_s5_{$us.id}();'>&nbsp;&nbsp;</div>
    <img src='/images/stars/s4.png' alt='s4' class='' width='100'/>
</div>

<div id='s5_{$us.id}' style='display:none;'>
    <div id='div_s1' onmouseover='show_s1_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s2' onmouseover='show_s2_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s3' onmouseover='show_s3_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s4' onmouseover='show_s4_{$us.id}();'>&nbsp;&nbsp;</div>
    <div id='div_s5' onmouseover='show_s5_{$us.id}();' onclick='load5_{$us.id}();'>&nbsp;&nbsp;</div>
    <img src='/images/stars/s5.png' alt='s5' class='' width='100'/>
</div>


<p class="w-100 mt-2"><b>{$all_lang[97]}:</b> <span id='small_rate_{$us.id}' name='small_rate_{$us.id}'>{$us.rate}</span></p>
</div>

Делаю рейтинг у себя на сайте. Принцип работы простой, нажал на звездочку рейтинг поднялся всего 5 звёздочек, он работает исправно но валидатор выдаёт ошибку из-за неуникальности id Ниже прилагаю скриншот ошибок скриншот ошибок


Источник

Ответы (1 шт):

Автор решения: teran

ваша портянка кода условно говоря по итогу должна выглядеть примерно так. без миллиарда функций и переключений стилей

$(".stars").click(function(e){
    e.preventDefault();
    let cr = $(this).closest('.rating');
    let pid = $(cr).data('id');
    let r = $(this).data('rating');
    
    //$.getJSON("/set_rating.php", { id: pid, rating: r }, function(){
    //   $(cr).attr('data-rating', r);
    //});
    
    $(cr).attr('data-rating', r); //
}).hover(function(e){
   if(e.type != 'mouseenter') return;
   $(this).closest('.rating').attr('data-hover', $(this).data('rating') );
});
a.stars {   
  text-decoration:none;
}

.stars::after {
   color: blue;
   content: "\2605";
}

.rating[data-rating="1"] a:nth-child(-n+1)::after{ color: red; }
.rating[data-rating="2"] a:nth-child(-n+2)::after{ color: red; }
.rating[data-rating="3"] a:nth-child(-n+3)::after{ color: red; }
.rating[data-rating="4"] a:nth-child(-n+4)::after{ color: red; }
.rating[data-rating="5"] a:nth-child(-n+5)::after{ color: red; }


.rating:hover a::after {
  content: "\2606";  
  color: grey !important;
}
.rating:hover[data-hover="1"] a:nth-child(-n+1)::after { color: green !important; }
.rating:hover[data-hover="2"] a:nth-child(-n+2)::after { color: green !important; }
.rating:hovуr[data-hover="3"] a:nth-child(-n+3)::after { color: green !important; }
.rating:hover[data-hover="4"] a:nth-child(-n+4)::after { color: green !important; }
.rating:hover[data-hover="5"] a:nth-child(-n+5)::after { color: green !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rating" data-id="123" data-rating="3">
  <a href="#" class="stars" data-rating="1"></a>
  <a href="#" class="stars" data-rating="2"></a>
  <a href="#" class="stars" data-rating="3"></a>
  <a href="#" class="stars" data-rating="4"></a>
  <a href="#" class="stars" data-rating="5"></a>
</ul>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.