查看按钮不起作用

时间：2016-02-12 10:01:21

标签： javascript html css twitter-bootstrap

我尝试运行此链接上提供的代码：http://www.bootply.com/wafppXvbD1

然而，当我尝试运行它时，一切都按预期显示，但按钮不起作用。

enter image description here 

<head>
   <link rel="stylesheet" href="css/bootstrap.css">
   <link  rel="stylesheet" href="css/core.css">// This one contains the css code that is given inside the link
  <link rel="stylesheet" href="css/bootstrap-anchor.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
  <script src="css/bootstrap-anchor.css"></script>
  <script src="js/review.js"></script> // This is the Js that is given inside the link and i have saved on this one.
  <script src="js/bootstrap-anchor.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/npm.js"></script>
</head>

这是我在主页顶部导入的内容。由于我不熟悉bootstrap，我不知道其他脚本究竟是做什么以及它们是如何做的。这就是为什么我导入所有东西只是为了确保它有效。

我做错了什么？

1 个答案:

答案 0 :(得分：0)

一切都在完美检查

$(function(){


  var reviewBox = $('.AT3RevPostBox');
  var newReview = $('.AT3RevPostTextArea');
  var openReviewBtn = $('.AT3RevPostOpenBtn');
  var closeReviewBtn = $('.AT3RevPostCloseBtn');

  openReviewBtn.click(function(e)
  {
    reviewBox.slideDown(400, function()
      {
        newReview.trigger('autosize.resize');
        newReview.focus();
      });
    openReviewBtn.fadeOut(100);
    closeReviewBtn.show();
  });

  closeReviewBtn.click(function(e)
  {
    e.preventDefault();
    reviewBox.slideUp(300, function()
      {
        newReview.focus();
        openReviewBtn.fadeIn(200);
      });
    closeReviewBtn.hide();
    
  });
  
});



$(".AT3RevStar").hover(function(event) {
  var target = $( event.target );
  if ( target.is( "span" ) ) 
  {
    target.removeClass("glyphicon-star-empty").addClass("glyphicon-star");  
  	target.nextAll("span").removeClass("glyphicon-star").addClass("glyphicon-star-empty");
  	target.prevAll("span").removeClass("glyphicon-star-empty").addClass("glyphicon-star");  
  }
    
});

$(".AT3RevStarWrap").mouseleave(function(event) {
  var starWrapEl = $(this);  
  var children = starWrapEl.children("span");
  var input = starWrapEl.find(":input").eq(0);
  var rating = parseInt(input.val(),10);    
  for (i = 0; i < rating; i ++)
  {
    var child = $(children[i]);
    child.removeClass("glyphicon-star-empty").addClass("glyphicon-star");
  }      
  for (i = rating ; i < children.length; i ++)
  {    
    var child = $(children[i]);
    child.removeClass("glyphicon-star").addClass("glyphicon-star-empty");
  }      
});

$(".AT3RevStar").click(function(event) {
  var target = $( event.target );
  var rating = target.prevAll("span").length + 1;
  var input = target.parent().find(":input").eq(0);
  input.val (rating);  
});
body {
    margin: 10px;
}

.AT3RevLarge
{
    font-size:40px;    
}

.AT3RevSummary
{    
    padding:10px;
    vertical-align:top;
}


.AT3RevStar
{
  font-size:20px;
  cursor:pointer;  
}

.AT3RevText1{
  vertical-align: middle; padding-left: 10px; text-align:left;
  }

.AT3RevName
{
  font-weight:bold;border-right:2px solid lightgray;padding-right:5px;
}

.AT3RevDate{
  color:gray;
  padding-left:5px;
  padding-right:5px;
  border-right:2px solid lightgray;
  }

.AT3RevPostBox
{
  display: none;
}

.AT3RevPostCloseBtn{
  margin-right: 10px;
  }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-4 AT3RevSummary text-center">
                        <div class="AT3RevLarge">
                            83%
                        </div>
                        <div style="font-size: 20px;">
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                        </div>
                        <div>
                            Based on <span style="font-weight: bold">12</span> reviews
                        </div>
                    </div>
                    <div class="col-sm-4 AT3RevSummary text-center">
                        <div>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span style="font-weight:bold;">15</span> customers
                        </div>
                        <div>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span style="font-weight:bold;">15</span> customers
                        </div>
                        <div>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span style="font-weight:bold;">15</span> customers
                        </div>
                        <div>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span style="font-weight:bold;">15</span> customers
                        </div>
                        <div>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                            <span style="font-weight:bold;">15</span> customers
                        </div>
                    </div>
                    <div class="col-sm-4 text-center AT3RevSummary">
                        <table style="margin: 0 auto">
                            <tbody>
                                <tr>
                                    <td class="AT3RevLarge">83
                                    </td>
                                    <td class="AT3RevText1">customers already purchased
                                    </td>
                                </tr>
                                <tr>
                                    <td class="AT3RevLarge">60
                                    </td>
                                    <td class="AT3RevText1">of customers recommend
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="well well-sm">
                <div class="text-right">
                    <a class="btn btn-success btn-green AT3RevPostOpenBtn" href="#reviews-anchor">Leave a Review</a>
                </div>
                <div class="row AT3RevPostBox">
                    <div class="col-md-12">
                        <textarea class="form-control AT3RevPostTextArea" cols="50" placeholder="Enter your review here..." rows="5"></textarea>

                        <div class="text-right">
                            <div class="AT3RevStarWrap">
                                <input value="0" type="hidden">
                                <span class="glyphicon glyphicon-star-empty AT3RevStar "></span>
                                <span class="glyphicon glyphicon-star-empty AT3RevStar"></span>
                                <span class="glyphicon glyphicon-star-empty AT3RevStar"></span>
                                <span class="glyphicon glyphicon-star-empty AT3RevStar"></span>
                                <span class="glyphicon glyphicon-star-empty AT3RevStar"></span>
                            </div>

                            <a class="btn btn-danger btn-sm AT3RevPostCloseBtn" href="#">
                                <span class="glyphicon glyphicon-remove"></span>Cancel</a>
                            <button class="btn btn-success btn-lg" type="submit">
                                <span class="glyphicon glyphicon-ok"></span> Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="well well-sm">
    <div>
        <span class="AT3RevName">Brian</span>
        <span class="AT3RevDate">22.10.2015</span>
        <span>
      <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star-empty"></span>
        <span class="glyphicon glyphicon-star-empty"></span>
        </span>
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor
        imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
    </div>
</div>

<div class="well well-sm">
    <div>
        <span class="AT3RevName">Brian</span>
        <span class="AT3RevDate">22.10.2015</span>
        <span>
      <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star-empty"></span>
        <span class="glyphicon glyphicon-star-empty"></span>
        </span>
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor
        imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
    </div>
</div>

相关问题
最新问题