Форум

biryukovm · #1 (**permalink**) 19.03.2017, 14:41

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

function textzaloba(tip,num) {
    
        document.getElementById(tip+'1_zvezda').classList.remove("fa-star-o","fa-star");
        document.getElementById(tip+'2_zvezda').classList.remove("fa-star-o","fa-star");
        document.getElementById(tip+'3_zvezda').classList.remove("fa-star-o","fa-star");
        document.getElementById(tip+'4_zvezda').classList.remove("fa-star-o","fa-star");
        document.getElementById(tip+'5_zvezda').classList.remove("fa-star-o","fa-star");
        
        if (num==1){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star-o");
        }
        if (num==2){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star-o");
        }
        if (num==3){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star-o");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star-o");
    
        }
        if (num==4){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star-o");
        }
        if (num==5){
            document.getElementById(tip+'1_zvezda').classList.add('fa-star');
            document.getElementById(tip+'2_zvezda').classList.add("fa-star");
            document.getElementById(tip+'3_zvezda').classList.add("fa-star");
            document.getElementById(tip+'4_zvezda').classList.add("fa-star");
            document.getElementById(tip+'5_zvezda').classList.add("fa-star");
        }
    if (tip=='servis' && num>0){var  num_servis = num;}
    if (tip=='kachestvo' && num>0){var  num_kachestvo = num;}
    alert(num_servis+' '+num_kachestvo);

}

<label>Оценить сервис:</label>
<div class="text-center">
<input id="servis1" name="servis" value="1" type="radio" />
<input id="servis2" name="servis" value="2" type="radio" />
<input id="servis3" name="servis" value="3" type="radio" />
<input id="servis4" name="servis" value="4" type="radio" />
<input id="servis5" name="servis" value="5" type="radio" />
<label onclick="textzaloba('servis','1')" for="servis1" class="btn btn-default"><i id="servis1_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('servis','2')" for="servis2" class="btn btn-default"><i id="servis2_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('servis','3')" for="servis3" class="btn btn-default"><i id="servis3_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('servis','4')" for="servis4" class="btn btn-default"><i id="servis4_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('servis','5')" for="servis5" class="btn btn-default"><i id="servis5_zvezda" class="fa fa-star-o text-yellow"></i></label>
</div>

<label>Оценить качество:</label>
<div class="text-center">
<input id="kachestvo1" name="kachestvo" value="1" type="radio" />
<input id="kachestvo2" name="kachestvo" value="2" type="radio" />
<input id="kachestvo3" name="kachestvo" value="3" type="radio" />
<input id="kachestvo4" name="kachestvo" value="4" type="radio" />
<input id="kachestvo5" name="kachestvo" value="5" type="radio" />
<label onclick="textzaloba('kachestvo','1')" for="kachestvo1" class="btn btn-default"><i id="kachestvo1_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('kachestvo','2')" for="kachestvo2" class="btn btn-default"><i id="kachestvo2_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('kachestvo','3')" for="kachestvo3" class="btn btn-default"><i id="kachestvo3_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('kachestvo','4')" for="kachestvo4" class="btn btn-default"><i id="kachestvo4_zvezda" class="fa fa-star-o text-yellow"></i></label>
<label onclick="textzaloba('kachestvo','5')" for="kachestvo5" class="btn btn-default"><i id="kachestvo5_zvezda" class="fa fa-star-o text-yellow"></i></label>
</div>

laimas · #2 (**permalink**) 19.03.2017, 15:16

Лучше подумайте как это использовать. Источник отсюда.

biryukovm · #3 (**permalink**) 19.03.2017, 15:25

Это у меня уже есть и оно работает нормально без збоев.
Я же пишу мне надо переменные не терять.
Есть конечно как вариант записывать их в HTML код а потом постоянно считывать отуда но я думаю это как то не по уму есть наверное более умные способы

рони · #4 (**permalink**) 19.03.2017, 15:26

biryukovm,

var  num_servis = num_kachestvo ="";
    if (tip=='servis' && num>0){num_servis = num;}
    if (tip=='kachestvo' && num>0){num_kachestvo = num;}
    alert(num_servis+' '+num_kachestvo);

laimas · #5 (**permalink**) 19.03.2017, 15:44

Сообщение от biryukovm

Я же пишу мне надо переменные не терять.

А что значит терять, ведь предлагается оценить сервис, а значит то "что есть" при наведении мыши отражает выбор, а щелчок по позиции выбранной, это выбор радио кнопки, а выбор должен хранить сервер. Или не так? Как же что-то может потеряться?

biryukovm · #6 (**permalink**) 19.03.2017, 16:10

Сообщение от laimas

А что значит терять, ведь предлагается оценить сервис, а значит то "что есть" при наведении мыши отражает выбор, а щелчок по позиции выбранной, это выбор радио кнопки, а выбор должен хранить сервер. Или не так? Как же что-то может потеряться?

Необходимо если он в какомто из рейтингов указал ниже 3х то клиент должен написать причину, если больше значит притензий нет и писать не надо

laimas · #7 (**permalink**) 19.03.2017, 16:30

Сообщение от biryukovm

клиент должен написать причину

Ясно, то есть выбор оценки еще не есть отправление формы.

laimas · #8 (**permalink**) 19.03.2017, 18:55

biryukovm,
лучше делегировать обработку, это сократит код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
@font-face {
  font-family: 'FontAwesome';
  src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
  url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input {
    display: none;
}
.text-center {
    direction: rtl;
    text-align: left;
    color: #D9A41D;
    font-size: 22px;
    cursor: pointer;
}
.text-center > label:before {
    content: "\f006";
}
.text-center > .fa-star:before,
.text-center > label:hover:before,
.text-center > label:hover ~ label:before {
   content: "\f005";
}
</style> 
<script> 
function setRate(e) {
    var o = e.target || e.srcElement;
    if(o.tagName=="INPUT") {
        [].slice.call(o.parentNode.querySelectorAll('label')).reverse().forEach(function(e, i) {
            if(o.value > i) e.classList.add('fa-star');
            else e.classList.remove('fa-star');
        })
    }
}
</script> 
</head>
<body>
<label>Оценить сервис:</label>
<div class="text-center" onclick="setRate(event)">
<input id="s1" name="service" value="1" type="radio" />
<input id="s2" name="service" value="2" type="radio" />
<input id="s3" name="service" value="3" type="radio" />
<input id="s4" name="service" value="4" type="radio" />
<input id="s5" name="service" value="5" type="radio" />
<label for="s5" class="fa btn btn-default"></label>
<label for="s4" class="fa btn btn-default"></label>
<label for="s3" class="fa btn btn-default"></label>
<label for="s2" class="fa btn btn-default"></label>
<label for="s1" class="fa btn btn-default"></label>
</div>

<label>Оценить качество:</label>
<div class="text-center" onclick="setRate(event)">
<input id="q1" name="quality" value="1" type="radio" />
<input id="q2" name="quality" value="2" type="radio" />
<input id="q3" name="quality" value="3" type="radio" />
<input id="q4" name="quality" value="4" type="radio" />
<input id="q5" name="quality" value="5" type="radio" />
<label for="q5" class="fa btn btn-default"></label>
<label for="q4" class="fa btn btn-default"></label>
<label for="q3" class="fa btn btn-default"></label>
<label for="q2" class="fa btn btn-default"></label>
<label for="q1" class="fa btn btn-default"></label>
</div>
</body>
</html>

biryukovm · #9 (**permalink**) 19.03.2017, 21:24

Неужеди никто подсказать не может ?

рони · #10 (**permalink**) 19.03.2017, 21:36

Сообщение от biryukovm

Неужеди никто подсказать не может ?

в чём проблема-то?

Форум

Справочник

Discord чат

Курсы javascript