javascript - jQuery 下拉菜单 - Wordpress

Question

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

.js 文件似乎有问题，因为控制台显示错误:Uncaught TypeError: Object [object Object] has no method '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>

Answer 1

这里:

<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 之前。你应该解决这个问题。