0

我正在尝试创建包含图像的 jquery 选择字段。(ddslick)

文件似乎有问题.js，因为控制台显示错误：未捕获的类型错误：对象 [对象对象] 没有方法 'ddslick' 但在 jsfiddle 中工作：http: //jsfiddle.net/newbie123/ zUgyd/5/

它在 jsfiddle 中正确加载，但在控制台中给出了该错误并且不加载。

我也尝试将其放入页面的脚本中（使用 wordpress 上的脚本插件），即： 

//Dropdown plugin data
            var ddData = [
                {
                    text: "Facebook",
                    value: "FB",
                    description: "Description with Facebook",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                },
                {
                    text: "Twitter",
                    value: "TWT",
                    description: "Description with Twitter",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                },
                {
                    text: "LinkedIn",
                    value: "LI",
                    description: "Description with LinkedIn",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                },
                {
                    text: "Foursquare",
                    value: "FSQ",
                    description: "Description with Foursquare",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                }
            ]

HTML

<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){   doTotal(this);   calcMenu(this); });
// ]]></script>
<script type="text/javascript">$('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }   
});</script>
<div id="myDropdown">
<select id="selectMenu">
        <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.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" selected="selected" 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>
</div>
</form>

在header.php

  wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.ddslick.js"></script>
<!-- Make sure your CSS file is listed before jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

</head>
4

1 回答 1

3

这里：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.ddslick.js"></script>
<!-- Make sure your CSS file is listed before jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

.js 文件不是 CSS。:) 您的 jQuery 插件包含在 jQuery 之前。你应该解决这个问题。

于 2013-04-17T18:57:23.827 回答