ddSlick 包括但不工作答案

【问题标题】：ddSlick included but doesn't workddSlick 包括但不工作
【发布时间】：2014-12-22 00:32:22
【问题描述】：

您好，我正在尝试使用图片制作下拉菜单。这就是为什么我想使用 ddSlick（一个 jQuery 插件），它可以为我实现这一点。不幸的是，它不起作用。但我已按照插件的说明进行操作。我尝试了以下方法：

template_head.blade.php（包括 jquery.ddslick.min.js 文件）

 <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Offerte tool</title>
      <!-- Bootstrap -->
      {{HTML::style('css/bootstrap.min.css')}}
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      {{ HTML::script('js/bootstrap.min.js') }}
      <!-- To use less I have to include my own css first and then the less library. Because I have read the following in less.org:Make sure you include your stylesheets before the script.) -->
      <link rel="stylesheet/less" type="text/css" href="{{ asset('css/core.less') }}" />

      <script src="{{ asset('js/less-1.7.5.min.js') }}" type="text/javascript"></script>
      <script src="{{ asset('js/bootstrap-rating-input.min.js') }}" type="text/javascript"></script>
      <script src="{{ asset('js/jquery.ddslick.min.js') }}" type="text/javascript"></script>
       {{HTML::script('js/application.js')}}

user.blade.php（有一个下拉列表）

<!DOCTYPE html>
<html lang="en">
   <head>
    @include('user._layouts.template_head')
   </head>
    <script>
      $('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
         $('#demo-htmlselect').ddslick();
      }   
    });
    </script>

   <body>
      <select id="demo-htmlselect">
        <option value="0" data-imagesrc="{{ asset('images/orange.png') }}"
            data-description="Description with Facebook">Facebook</option>
        <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            data-description="Description with Twitter">Twitter</option>
        <option value="2"  data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            data-description="Description with LinkedIn">LinkedIn</option>
        <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            data-description="Description with Foursquare">Foursquare</option>
    </select>
   </body>
</html>

在 user.blade.php 中可以看到以下内容：

  <option value="0" data-imagesrc="{{ asset('images/orange.png') }}"

所以你能看到我有一张应该显示在下拉列表中的图片吗？但它不像你在这里看到的那样：

链接：http://i.imgur.com/9k3PZBZ.png

图像 orange.png 看起来像这样：

链接：http://i.imgur.com/kbxyS4H.png

我还测试了我的 web 应用程序是否与 jquery.ddslick.min.js 文件建立了连接。它确实建立了联系。在这里你可以看到它的截图：

链接：http://i.imgur.com/Bpu4dKK.png

有人可以帮帮我吗？我在等你的回复。不管怎样，谢谢你的回答。

【问题讨论】：

标签： php jquery html laravel blade

【解决方案1】：

这只是一个疯狂的猜测，但您可能需要将您的 js 代码包装在 $(document).ready() 中。这样可以确保 DOM 中的所有元素都存在，并且插件可以正确初始化。

$(document).ready(function(){
    $('#demo-htmlselect').ddslick();
});

编辑：你也不需要#myDropdown的所有东西

【讨论】：

您好我已经尝试过您的解决方案，但不幸的是它不起作用:(。
@superkytoz 好的，你为什么在#myDropdown的回调函数中初始化#demo-htmlselect上的ddslick？
说实话我不知道，但我现在已经试过了：链接：pastebin.com/Sc4aVGWE 但它仍然不起作用..我使用这段代码，因为我已经从链接说明：designwithpc.com/Plugins/ddSlick
选择器 (#myDropdown) 确实需要匹配您的选择元素。给我一秒钟，我会更新我的答案
我很高兴它有效！再次感谢您的回答:)！

【解决方案2】：

<script>
  $('#demo-htmlselect').ddslick({
onSelected: function(selectedData){
    //callback function: do something with selectedData;
     $('#demo-htmlselect').ddslick();
  }   
});
</script>

您需要提供下拉列表 ID，而不是 myDropdown。然后在onSelectedfunction 中，您可以根据需要对所选数据进行操作。

【讨论】：