jQuery和Bootstrap星级之间的冲突（表情符号形式）

时间：2018-02-09 17:13:56

标签： javascript jquery html css twitter-bootstrap

我正在创建一个反馈表单： - 表格的第一部分使用表情符号评级 - 第二部分使用图片和＆＃34; bootstrap星级＆＃34;插件

但是当我将这两个部分组合在一起时似乎存在冲突。

以下是表单的外观： Expected Form (picture)

编辑10/02/2018 Robert解释说jQuery应该在Star Rating之前加载，如下所示：

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js'></script>

- ＆GT;这解决了开发人员控制台中的错误

表单的第一部分变得凌乱：problem Case A (picture)。 结果可以在这里看到：http://www.ju-lehadventure.com/feedback_A.html

编辑10/02/2018 罗伯特，我不确定如何删除rating的副本。我做了一些测试，但它没有工作...... 当我完全删除class时，它看起来更接近预期的布局（不再受到＆＃34;星级＆＃34;插件的干扰），但是单选按钮变得可见并且表情符号没有转动选中时为黄色......

这是我修改的内容（feedback_A_2.html）：

    <div class="ratingItemList">
      <input id="rating1-1-2" type="radio" value="1" name="rating1"/>
      <label class="rating rating1-1" for="rating1-1-2"><i class="em em-angry"></i></label>
      <input id="rating1-2-2" type="radio" value="2" name="rating1"/>
      <label class="rating rating1-2" for="rating1-2-2"><i class="em em-disappointed"></i></label>
      <input id="rating1-3-2" type="radio" value="3" name="rating1"/>
      <label class="rating rating1-3" for="rating1-3-2"><i class="em em-expressionless"></i></label>
      <input id="rating1-4-2" type="radio" value="4" name="rating1"/>
      <label class="rating rating1-4" for="rating1-4-2"><i class="em em-grinning"></i></label>
      <input id="rating1-5-2" type="radio" value="5" name="rating1"/>
      <label class="rating rating1-5" for="rating1-5-2"><i class="em em-heart_eyes"></i></label>
    </div>
  </label>

结果可以在这里看到：http://www.ju-lehadventure.com/feedback_A_2.html

修改代码的正确方法是什么？

我尝试保留第一个rating并删除其他的但是 - ＆gt;只有第一个表情符号被打乱了，其他人才有了单选按钮...

实际上，我不理解所有这些课程的使用情况＆＃34;评级等级1,1和＃34;，＆＃34;评级等级1-2和＃34;等等。我在哪里可以获得更多相关信息？

谢谢！

---编辑结束---

feedback_A.html 

<!DOCTYPE html>

<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Feedback Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel='stylesheet prefetch' 
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css'>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://afeld.github.io/emoji-css/emoji.css'>
<link rel="stylesheet" href="css/feedback_1.css">

</head>


<body>

<form class="rating-wrapper">

  <label class="rating-label">
  <span style="font-size: 21.0pt; color: #3870c4">What did you think of:</span><br/><br/>
  the services provided by the agency (itinerary, booking process, organization)?

<div class="ratingItemList">
  <input class="rating rating1-1" id="rating1-1-2" type="radio" value="1" name="rating1"/>
  <label class="rating rating1-1" for="rating1-1-2"><i class="em em-angry"></i></label>
  <input class="rating rating1-2" id="rating1-2-2" type="radio" value="2" name="rating1"/>
  <label class="rating rating1-2" for="rating1-2-2"><i class="em em-disappointed"></i></label>
  <input class="rating rating1-3" id="rating1-3-2" type="radio" value="3" name="rating1"/>
  <label class="rating rating1-3" for="rating1-3-2"><i class="em em-expressionless"></i></label>
  <input class="rating rating1-4" id="rating1-4-2" type="radio" value="4" name="rating1"/>
  <label class="rating rating1-4" for="rating1-4-2"><i class="em em-grinning"></i></label>
  <input class="rating rating1-5" id="rating1-5-2" type="radio" value="5" name="rating1"/>
  <label class="rating rating1-5" for="rating1-5-2"><i class="em em-heart_eyes"></i></label>
</div>        

</label>       <label class="rating-label">the services provided by the staff during the trip (guide, driver, cook, etc.)?

<div class="ratingItemList">
  <input class="rating rating2-1" id="rating2-1-2" type="radio" value="1" name="rating2"/>
  <label class="rating rating2-1" for="rating2-1-2"><i class="em em-angry"></i></label>
  <input class="rating rating2-2" id="rating2-2-2" type="radio" value="2" name="rating2"/>
  <label class="rating rating2-2" for="rating2-2-2"><i class="em em-disappointed"></i></label>
  <input class="rating rating2-3" id="rating2-3-2" type="radio" value="3" name="rating2"/>
  <label class="rating rating2-3" for="rating2-3-2"><i class="em em-expressionless"></i></label>
  <input class="rating rating2-4" id="rating2-4-2" type="radio" value="4" name="rating2"/>
  <label class="rating rating2-4" for="rating2-4-2"><i class="em em-grinning"></i></label>
  <input class="rating rating2-5" id="rating2-5-2" type="radio" value="5" name="rating2"/>
  <label class="rating rating2-5" for="rating2-5-2"><i class="em em-heart_eyes"></i></label>
</div>

 </label>

<label class="rating-label">
<span style="color: #3870c4">How likely would you recommend Ju-Leh Adventure to your friends?</span><br/><br/>

</label>



<div class="example-03">

         <input id="input-03" value="0">
</div>



  <div class="feedback">
    <textarea name="textarea" placeholder="What would you like to share with us?"></textarea>
    <button class="submit">Send Your Feedback</button>
  </div>
</form>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js'></script>

 <script  src="js/feedback_1.js" type="text/javascript"></script>
 <script  src="js/feedback_2.js" type="text/javascript"></script>


 </body>

 </html>

feedback_1.css 

    @import url("https://fonts.googleapis.com/css?family=Lato:400,700");
body {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 18px;
  background: #edf0f5;
  color: #002125;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.rating-wrapper {
  max-width: 400px;
  margin: 0px auto;
  background: #fff;
  padding: 1em;
  border-radius: 3px;
  -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}
.rating-wrapper .rating-label {
  text-align: center;
  font-weight: 700;
  display: block;
}
.rating-wrapper .ratingItemList {
  max-width: 300px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1em 0;
}
.rating-wrapper input.rating {
  display: none;
}
.rating-wrapper label.rating {
  padding: 5px 3px;
  font-size: 32px;
  opacity: .7;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  cursor: pointer;
}
.rating-wrapper label.rating:hover {
  -webkit-filter: grayscale(0.84);
          filter: grayscale(0.84);
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-transition: 100ms ease;
  transition: 100ms ease;
}
.rating-wrapper input.rating:checked + label.rating {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  opacity: 1;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

.feedback {
  width: 100%;
}
.feedback textarea, .feedback input {
  max-width: 300px;
  width: 90%;
  display: block;
  margin: .5em auto;
  padding: .5em;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  border: 1px solid #d2d3d8;
  border-radius: 3px;
}
.feedback textarea:focus, .feedback textarea:active, .feedback input:focus, .feedback input:active {
  border-color: #3870c4;
  -webkit-box-shadow: 0px 0px 1px 1px #3870c4;
          box-shadow: 0px 0px 1px 1px #3870c4;
  -webkit-transition: 100ms;
  transition: 100ms;
}
.feedback textarea {
  height: 100px;
}
.feedback button {
  margin: 1em auto;
  display: table;
  text-align: center;
}

.disputelab_logo {
  width: 140px;
  position: absolute;
  top: 1em;
  left: 50%;
  margin-left: -70px;
}

button {
  color: #edeef0;
  background-color: #9b9ea9;
  border-radius: 3px;
  font-family: 'Lato', Arial sans-serif;
  border: 0;
  padding: 9px 15px;
  font-size: 15px;
}

button.not-disabled {
  color: white;
  background-color: #3870c4;
  text-shadow: 0px 1px 1px #214375;
  cursor: pointer;
}
button.not-disabled:hover {
  background-color: #2d599c;
  -webkit-transition: 100ms;
  transition: 100ms;
}




@media screen and (min-width: 1px) and (max-width: 310px) {
  .example-03 img {
    width: 267px;
    height: 63px;
  }
}  

@media screen and (min-width: 310px) and (max-width: 315px) {
  .example-03 img {
    width: 272px;
    height: 64px;
  }
}  
@media screen and (min-width: 316px) and (max-width: 320px) {
  .example-03 img {
    width: 277px;
    height: 65px;
  }
}
@media screen and (min-width: 321px) and (max-width: 325px) {
  .example-03 img {
    width: 282px;
    height: 66px;
  }
}  
@media screen and (min-width: 326px) and (max-width: 330px) {
  .example-03 img {
    width: 287px;
    height: 67px;
  }
} 
@media screen and (min-width: 331px) and (max-width: 335px) {
  .example-03 img {
    width: 292px;
    height: 68px;
  }
}  
@media screen and (min-width: 336px) and (max-width: 340px) {
  .example-03 img {
    width: 297px;
    height: 70px;
  }
}
@media screen and (min-width: 341px) and (max-width: 345px) {
  .example-03 img {
    width: 302px;
    height: 71px;
  }
}  
@media screen and (min-width: 346px) and (max-width: 350px) {
  .example-03 img {
    width: 307px;
    height: 72px;
  }
}  
@media screen and (min-width: 351px) and (max-width: 355px) {
  .example-03 img {
    width: 312px;
    height: 73px;
  }
}  
@media screen and (min-width: 356px) and (max-width: 360px) {
  .example-03 img {
    width: 317px;
    height: 74px;
  }
} 
@media screen and (min-width: 361px) and (max-width: 365px) {
  .example-03 img {
    width: 322px;
    height: 75px;
  }
}
@media screen and (min-width: 366px) and (max-width: 370px) {
  .example-03 img {
    width: 327px;
    height: 77px;
  }
}   
@media screen and (min-width: 371px) and (max-width: 375px) {
  .example-03 img {
    width: 332px;
    height: 78px;
  }
} 
@media screen and (min-width: 376px) and (max-width: 380px) {
  .example-03 img {
    width: 337px;
    height: 79px;
  }
} 
@media screen and (min-width: 381px) and (max-width: 385px) {
  .example-03 img {
    width: 342px;
    height: 80px;
  }
} 
@media screen and (min-width: 386px) and (max-width: 390px) {
  .example-03 img {
    width: 347px;
    height: 81px;
  }
}
@media screen and (min-width: 391px) and (max-width: 395px) {
  .example-03 img {
    width: 352px;
    height: 82px;
  }
}
@media screen and (min-width: 396px) {
  .example-03 img {
    width: 357px;
    height: 84px;
  }

feedback_1.js 

$('button.submit').disabled = true; // disable button on load

// Enable button
function enable_submit() {      
$('button.submit').disabled = false;      
$('button.submit').addClass('not-disabled');    
}    

// Disable button

function disable_submit() {      
$('button.submit').disabled = true;      
$('button.submit').removeClass('not-disabled');    
}

// Display feedback after rating 

$('.rating').on('click', function() {
  var rating = this['value'];

$('.feedback').css('display', "block");
  feedback_validate(rating);
});


// Enable or disable button by validation

function feedback_validate(val) {
  if (val <= 0) {
    disable_submit();  
  } 
  else if (val > 0) {
    enable_submit();
  }    
}

feedback_2.js 

$(function(){ 

    $("#input-03").rating({
        min:0, max:4.5, step:0.5, size:'xs',
        showClear: false,
        clearCaption: '',
        stars: 1,
        emptyStar: '<img src="img/prayer_flags_bw.jpg" />',
        filledStar: '<img src="img/prayer_flags.jpg"  />',
        starCaptions: {
            0.5: 'highly unlikely',
            1: 'very unlikely',
            1.5: 'moderately unlikely',
            2: 'slightly unlikely',
            2.5: 'neutral',
            3: 'slightly likely',
            3.5: 'moderately likely',
            4: 'very likely',
            4.5: 'extremely likely',
        }
    });
});

图片文件： - prayer_flags.jpg - prayer_flags_bw.jpg

提前感谢您的帮助！

0 个答案:

没有答案
相关问题
最新问题