使用easySlider1.7，阻碍另一个JavaScript函数
[英]Using easySlider1.7, Hindering another JavaScript Function
问题描述
I am using easyslider1.7 jquery plugin to produce the scrollable slider effect. 
我正在使用easyslider1.7 jQuery插件来产生可滚动的滑块效果。 Below is my HTML in which I am using the plugin to produce the effect. 以下是我使用插件在其中产生效果的HTML。
<html>
<head>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/CSS1.css"/>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/screen.css"/>
<script type="text/javascript" src="../JS/Base.js"></script>
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true
});
});
</script>
<title>Realtime Notification Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body class="bodycustom1">
<iframe id="NotificationIframe" name="NotificationIframe" src="Notifications.html" seamless>
</iframe>
<br>
<div id="content">
<div id="slider">
<ul>
<li> <font onclick="changeIframeSrc('Notifications.html')">All</font>  
<img src="../icons/Alfresco.png" id="Alfresco" alt="Alfresco" onclick="changeIframeSrc('AlfrescoNotificationDeck.html')"/>  
<img src="../icons/GoogleCalendar.png" id="GoogleCalendar" alt="GoogleCalendar" onclick="changeIframeSrc('GCalNotificationDeck.html')"/>  
<img src="../icons/Linkedin.png" id="Linkedin" alt="LinkedIn" onclick="changeIframeSrc('LinkedInNotificationDeck.html')"/>  
<img src="../icons/Rss.png" id="Rss" alt="RSS" onclick="changeIframeSrc('RSSNotificationDeck.html')"/>
<br>
   
<img src="../icons/On.png" alt="On" id="one" onclick="toggleType('Alfresco','one');"/>  
<img src="../icons/On.png" alt="On" id="two" onclick="toggleType('GoogleCalendar','two');"/>  
<img src="../icons/On.png" alt="On" id="three" onclick="toggleType('Linkedin','three');"/>  
<img src="../icons/On.png" alt="On" id="four" onclick="toggleType('Rss','four');"/>
</li>
<li >
<img src="../icons/Salesforce.png" id="Salesforce" alt="Salesforce" onclick="changeIframeSrc('SFNotificationDeck.html')"/>  
<img src="../icons/Sharepoint.png" id="Sharepoint" alt="Sharepoint" onclick="changeIframeSrc('SPNotificationDeck.html')"/>  
<img src="../icons/Connections.png" id="Connections" alt="IBM Connections" onclick="changeIframeSrc('IBMConnNotificationDeck.html')"/>
<br>
<img src="../icons/On.png" alt="On" id="five" onclick="toggleType('Salesforce','five');"/>  
<img src="../icons/On.png" alt="On" id="six" onclick="toggleType('Sharepoint','six');"/>  
<img src="../icons/On.png" alt="On" id="seven" onclick="toggleType('Connections','seven');"/>
</li>
</ul>
</div>
</div>
</body>
I have written a javascript method to toggle the images from on to off and vice versa, and also changing the image of particular notification type. 我已经编写了一个javascript方法来将图像从打开切换到关闭，反之亦然，并且还更改了特定通知类型的图像。 By clicking on the On button in the above HTML, two changes should happen On button should change to Off button. 通过单击以上HTML中的“打开”按钮，应进行两次更改。“打开”按钮应更改为“关闭”按钮。 And the border of image above it should changes to a red border image. 并且其上方图像的边框应更改为红色边框图像。 VIce Versa for Off button. 单击“关闭”的Verce Versa。
function toggleType(channelType,button){
var type=document.getElementById(channelType);
var polarity=document.getElementById(button);
var situation=polarity.alt;
if(situation=="On"){
type.src="../icons/"+channelType+"RB.png";
type.style.cursor="auto";
polarity.src="../icons/Off.png";
polarity.alt="Off";
}else if(situation=="Off"){
type.src="../icons/"+channelType+".png";
type.style.cursor="pointer";
polarity.src="../icons/On.png";
polarity.alt="On";
}
}
The problem is my javascript function produce desirable results for the first 4 images that are in first li element. 问题是我的javascript函数为first li元素中的前4个图像产生了令人满意的结果。 But when I slide to the next set of images in the other li element, my javascript function stops working. 但是，当我滑动到另一个li元素中的下一组图像时，我的javascript函数停止工作。 It does not changes image and toggles on and off button. 它不会更改图像，并且会切换开和关按钮。
Please help me with it. 请帮我。 I am new to jquery. 我是jquery新手。
1 个解决方案
解决方案1
1 2012-04-03 04:48:51
The problem is with the elements in the last <li> element. 问题出在最后一个<li>元素中。 I commented the line given below from easySlider1.7.js and the problem vanished. 我评论了easySlider1.7.js下面给出的那行，问题消失了。
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
I don't know the exact reason why it happened though. 我不知道发生这种情况的确切原因。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.