0

我正在尝试创建包含图像的 jquery 选择字段。( http://designwithpc.com/Plugins/ddSlick )

我的代码似乎有问题，因为控制台显示错误： Uncaught TypeError: Object [object Object] has no method 'ddslick'

HTML

<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){   doTotal(this);   calcMenu(this); ddslick(this); });
// ]]></script>

<table id="table1" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Enquiry Date</td>
<td>
<div align="center"><input type="text" name="dateToday" size="25" /></div></td>
</tr>
<tr>
<td>Conference Name</td>
<td>
<div align="center"><input type="text" name="conferenceName" size="25" /></div></td>
</tr>
<tr>
<td>Company Name</td>
<td>
<div align="center"><input type="text" name="companyName" size="25" /></div></td>
</tr>
<tr>
<td>Special Requests</td>
<td><textarea name="comment" rows="5" cols="26"></textarea></td>
</tr>
</tbody>
</table>
<table id="table2" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>First Name</td>
<td>
<div align="center"><input type="text" name="firstName" size="25" /></div></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<div align="center"><input type="text" name="lastName" size="25" /></div></td>
</tr>
<tr>
<td>Tel No</td>
<td>
<div align="center"><input type="text" name="telNo" size="25" /></div></td>
</tr>
<tr>
<td>Cell</td>
<td>
<div align="center"><input type="text" name="cellNo" size="25" /></div></td>
</tr>
<tr>
<td>Email</td>
<td>
<div align="center"><input type="text" name="email" size="25" /></div></td>
</tr>
<tr>
<td><input onclick="formReset()" type="button" value="Reset form" /></td>
</tr>
</tbody>
</table>
<table id="tablex" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<th scope="col" width="30">
<div align="center">Date</div></th>
<th scope="col" width="128">
<div align="center">Amount of Delegates ½ Day Conference @ R 240 pp</div></th>
<th width="112">
<div align="center">Amount of Delegates Full Day Conference @ R 260 pp</div></th>
<th width="112">
<div align="center">Menu No</div></th>
<th width="112">
<div align="center">Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)</div></th>
<th width="112">
<div align="center">Total Persons for meals</div></th>
<th width="112">
<div align="center">Amount of Single Rooms @ R 480 pp</div></th>
<th width="112">
<div align="center">Amount of Double Rooms @ R 720 pp</div></th>
<th width="134">
<div align="center">Total for the day</div></th>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date1" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday1" size="5" maxlength="10" /></div></td>
<td>
<div align="center"><input type="text" name="fullday1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total1" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date2" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total2" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date3" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total3" size="5" /></div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

<div id="myDropdown">
<select id="myDropdown">
        <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>


$('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }   
});
4

1 回答 1

0

如果您使用的是 wordpress，请尝试按照以下步骤操作：

1 - 将 jquery.ddslick.js 文件复制到主题的 /js 文件夹中。

2 - 确保在 header.php 中写入文件的正确路径。在<head>标签内你应该有这样的东西：

<script src='<?php echo get_template_directory_uri(); ?>/js/jquery.ddslick.js'></script>

3 - 正如@Arnelle Balane 所指出的，您可能应该编写这段代码：

$('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }   
});

在一些脚本标签内：

<script type="text/javascript">
$('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }   
});
</script>

或者，您可以将该代码放入您的自定义 .js 文件中。这样您就不必将所有代码都放在 html 中：

a - 在您的 /js 文件夹中，创建另一个 .js 文件，如下所示：script.js

b - 在 script.js 文件中，在 jQuery on ready 函数中复制上面不带脚本标签的代码，如下所示：

jQuery(document).ready(function($) {
    $('#myDropdown').ddslick({
        onSelected: function(selectedData){
            //callback function: do something with selectedData;
        }   
    });
});

4 - 检查您的主题是否已激活 jquery，如果没有，您可以从此处下载 jquery并为 jQuery 文件重复步骤 2，或者您可以使用wordpress 中的 jQuery。

5 - 仔细检查拼写错误并测试是否有效；如果不是，可能是别的东西；随时通知我们。

更新：我在第三步中添加了更多信息，以防使用外部 .js 文件。

于 2013-04-18T04:55:07.037 回答