Javascript Flexslider和内容与表单
我对Flexsider有一个不寻常的问题,其中一张幻灯片中有一个表单。表单中有一些单选按钮,除了容器的一些div之外没有其他什么。单击单选按钮会在按钮周围产生光标轮廓,因此它会响应,但不会被选中。我确实尝试了使用javascript调用设置属性的测试。穿行时,它成功地设置了单选按钮,但在退出该功能后,单选按钮被重置。我似乎找不到在这里或其他地方讨论过的任何类似问题,我完全目瞪口呆 表单内容通过ajax加载。我注意到Flexslider创建了第一张和最后一张幻灯片的克隆,当ajax内容加载到幻灯片中时,克隆正在更新。我重新安排了幻灯片的顺序,这样就不会有表单的克隆,但仍然无法检查单选按钮。然而,在Firebug中,我将checked属性设置为true(在监视面板中使用jquery),并且这次按钮保持选中状态。尝试勾选/取消勾选不会产生任何效果,我通过Firebug设置了其属性的按钮仍然存在 编辑:我添加了一个文本字段,可以正常工作 下面是HTML。老实说,javascript可以忽略不计,因为它只是一个获取表单内容的ajax请求。用于视频的Javascript是jquery、flexslider和flowplayer。表单位于数据幻灯片2中,正式的第二张是克隆,因为第一张是克隆Javascript Flexslider和内容与表单,javascript,flexslider,Javascript,Flexslider,我对Flexsider有一个不寻常的问题,其中一张幻灯片中有一个表单。表单中有一些单选按钮,除了容器的一些div之外没有其他什么。单击单选按钮会在按钮周围产生光标轮廓,因此它会响应,但不会被选中。我确实尝试了使用javascript调用设置属性的测试。穿行时,它成功地设置了单选按钮,但在退出该功能后,单选按钮被重置。我似乎找不到在这里或其他地方讨论过的任何类似问题,我完全目瞪口呆 表单内容通过ajax加载。我注意到Flexslider创建了第一张和最后一张幻灯片的克隆,当ajax内容加载到幻灯片
<section class="slider">
<div class="flexslider" id="mainSlider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 1000%; margin-left: -3486px;">
<li data-slide="2" data-type="Quiz" data-id="6" class="clone" style="width: 1162px; float: left; display: block;">
<div class="quiz" data-id="1">
<div class="quizDescription">
</div>
<div class="quizContent" data-id="1">
<div style="max-width: " data-id="1" class="question">
<div class="questionText">Is TRUE true?<br></div>
<span id="CourseQuizAnswer"><input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2">
<label for="CourseQuizAnswer_0" style="display:inline">True</label><br>
<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_1" value="3">
<label for="CourseQuizAnswer_1" style="display:inline">False</label>
</span>
</div>
</div>
<div class="well">
<input type="button" value="Submit" name="yt0" onclick="submitQuestionAnswer(this);" class="btn btn-primary btn-med">
</div>
</div>
</li>
<li data-slide="0" data-type="Video" data-id="2" style="width: 1162px; float: left; display: block;" class="">
<div class="minimalist video-slide flowplayer is-mouseout is-ready is-paused" data-video_id="1" id="mainPlayer">
<video tabindex="0" class="fp-engine">
<source src="http://stream.flowplayer.org/bauhaus/624x260.webm" type="video/webm"></source>
</video>
<div class="fp-ratio" style="padding-top: 56.25%;"></div> <div class="fp-ui"> <div class="fp-waiting"><em></em><em></em><em></em></div> <a class="fp-fullscreen"></a> <a class="fp-unload"></a> <p class="fp-speed"></p> <div class="fp-controls"> <a class="fp-play"></a> <div class="fp-timeline" style=""> <div class="fp-buffer" style="width: 100%;"></div> <div class="fp-progress"></div> </div> <div class="fp-volume"> <a class="fp-mute"></a> <div class="fp-volumeslider" style=""> <div class="fp-volumelevel" style="width: 43%;"></div> </div> </div> </div> <div class="fp-time"> <em class="fp-elapsed">00:00</em> <em class="fp-remaining">00:40</em> <em class="fp-duration">00:40</em> </div> <div class="fp-message"><h2></h2><p></p></div> </div><a href="http://flowplayer.org" target="_top"></a></div>
</li>
<li data-slide="1" data-type="Content" data-id="5" style="width: 1162px; float: left; display: block;">
Segment 2
</li>
<li data-slide="2" data-type="Quiz" data-id="6" class="flex-active-slide" style="width: 1162px; float: left; display: block;">
<div class="quiz" data-id="1">
<div class="quizDescription">
</div>
<div class="quizContent" data-id="1">
<div style="max-width: " data-id="1" class="question">
<div class="questionText">
Is TRUE true?<br>
</div>
<span id="CourseQuizAnswer">
<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2">
<label for="CourseQuizAnswer_0" style="display:inline">True</label><br>
<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_1" value="3">
<label for="CourseQuizAnswer_1" style="display:inline">False</label>
</span>
</div>
</div>
<div class="well">
<input type="button" value="Submit" name="yt0" onclick="submitQuestionAnswer(this);" class="btn btn-primary btn-med">
</div>
</div>
</li>
<li data-slide="0" data-type="Video" data-id="2" style="width: 1162px; float: left; display: block;" class="clone">
<div class="minimalist video-slide" data-video_id="1" id="mainPlayer">
<video tabindex="0">
<source src="http://stream.flowplayer.org/bauhaus/624x260.webm" type="video/webm"></source>
</video>
</div>
</li>
</ul>
</div>
</div>
</section>
有人有什么见解吗?提前谢谢 单选按钮有重复的
id
s。请删除重复的id
s,然后重试。如果仍然不起作用,请告诉我
例如:
<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2">
与
<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2">
它在页面上存在两次
我知道你为什么会认为你的id
s是独一无二的:你让它们在与之相关的问题上独一无二。但是,您忘记了使它们在页面上唯一。问题是id
s都在全局页面范围内,不管它们在哪里声明
祝你好运!:) flexslider创建每张幻灯片的镜像副本,以便在滚动浏览最后一张幻灯片时产生连续性错觉。它们是用类名“clone”创建的。您可以尝试使用jQuery在提交前禁用表单:
$(".clone input").prop("disabled", true);
请出示您的代码和/或制作小提琴。代码按要求添加。很抱歉。ID是唯一的,它们分别附加了0和1。但是,名称属性是相同的。我只是将我对你的评论的回应移到了我的回答中。现在我明白你的意思了。flexslider对animationLoop执行此操作,它克隆结束幻灯片。所以我把它关掉了,这意味着现在这些ID是唯一的,仍然是空的。我添加了一个onclick函数调用来设置checked属性,并在设置属性之后设置断点。此时,单选按钮已设置并明显打开,但一旦我们退出该函数,单选按钮将被清除。此外,请发布您的JavaScriptI,我解决了这个问题,并进一步考虑了正在发生的事情。老实说,我仍然不确定这是否是由Flexslider引起的,但在单击事件时添加了一个“stopPropagation”,从而解决了问题。