我正在尝试创建包含图像的 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>
最佳答案
这里:
<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 之前。你应该解决这个问题。
关于javascript - jQuery 下拉菜单 - Wordpress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16067886/