Question

我使用jsfiddle从此链接获取解决方案，因为我试图找出如何在旋转木马中显示图片缩略图：http://jsfiddle.net/8rv96jex/2/

除了我无法点击图片缩略图外，一切正常。我已经检查了十几次代码，以确保没有什么小错过但没有运气。我将在下面复制代码。我是RoR和Web Dev的新手。非常感谢对可能解决方案的任何想法

布局/ application.html.erb

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width" initial-scale="1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" />
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <link rel="shortcut icon" href="/assets/images/favicon.ico">
  <link rel="stylesheet" href="segment.css">
  <link rel="stylesheet" href="https://checkout.stripe.com/v3/checkout/button.css"></link>

</head>
<body data-spy="scroll" data-target=".navbar" data-offset="500">
...

<script src="segment.js"></script>
  <% flash.each do |message_type, message| %>
    <div class="alert alert-<%= message_type %>"><%= message %></div>
  <% end %>
<%= yield %>

</body>

的javascript / application.js中

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets

$(document).ready(function () {
$('.collapse').collapse;

var $root = $('html, body');
    $('.navbar-nav a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top-50
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
            });

$(".segment-select").Segment();

var options = {
    agreed: [
        {price: 19, link: 'link1'},
        {price: 199, link: 'link2'},
        {price: 449, link: 'link3'}
    ],
    nope: [
        {price: 39, link: 'link4'},
        {price: 249, link: 'link5'},
        {price: 499, link: 'link6'}
    ]
};

function fillContent(interval) {
    var data = options[interval];

 $('.content').each(function(index) {
        var content = $(this);

        content.hide();

        content.find('.price').text('$' + data[index].price);
        content.find('.link').attr('href', data[index].link);

        content.fadeIn("3000");
    });

 $('#myCarousel').carousel({
 interval: 4000
 });

 // handles the carousel thumbnails
 $('[id^=carousel-selector-]').click( function(){
 var id_selector = $(this).attr("id");
 var id = id_selector.substr(id_selector.length -1);
 id = parseInt(id, radix);
 $('#myCarousel').carousel(id);
 $('[id^=carousel-selector-]').removeClass('selected');
 $(this).addClass('selected');
 });

// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id, radix);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id^=carousel-selector-'+id+']').addClass('selected');
});

}

});

Bootstrap Carousel图片缩略图

0 个答案: