我有一个可折叠时间列表,如“9:00 - 10:00”,附近有一个十字架的图像..当你打开折叠时,有2个输入。如果你填写这个输入,我想做到这一点。交叉更改为支票...但我没有这样做..当我填写输入没有发生任何事情..我不明白什么是错的...给我看我的错误,请...也许问题类似于我之前遇到的问题 - > Jquery Calendar - .attr('id') get wrong value
编辑:我测试了它$(collapsibleID).attr('style' , 'background:green');
而不是改变画面,而且它正在工作......不如我想要的那么好但正在工作..问题在于图片声明?
Keydown事件 - >>>>
var collapsibleID = '#'+$('.added').parent('spanTimetable').attr('id');
var pictureID = '#'+$('.checkOrCross').attr('id');
$(collapsibleID).find('.projectName').keydown(
function() {
if ($(this).val() != ""
&& $(collapsibleID).find('.projectEntry')
.val() != "") {
$(pictureID).attr('src' , 'pics/check.png');
}
})
$(collapsibleID).find('.projectEntry').keydown(
function() {
if ($(collapsibleID).find('.projectName').val() != ""
&& $(this).val() != "") {
$(pictureID).attr('src' , 'pics/check.png');
}
})
绘制模板 - >>>
function drawTemplate() {
var selectedValue = parseInt($('#timeDropList').val());
var textProjectName = '<center>Project Name:</center><center> <input data-theme="c" type="text" class="projectName" value="" /></center>';
var textProjectData = '<center>Entry:</center><center> <input data-theme="c" style="height:50px;" type="text" class="projectEntry" value="" /></center>';
var timespan = new Date(2011, 7, 11, 9, 0);
while (timespan.getHours() < 18 || timespan.getHours() == 18 && timespan.getMinutes() == 0) {
var hoursFrom = timespan.getHours();
var minsFrom = timespan.getMinutes();
if (minsFrom < 10) {
minsFrom = "0" + minsFrom;
}
if (hoursFrom < 10) {
hoursFrom = "0" + hoursFrom;
}
var hoursTo = timespan.getHours();
var minsTo = timespan.getMinutes() + selectedValue
if (minsTo == 60) {
minsTo = "00";
hoursTo++;
} else if (minsTo < 10) {
minsTo = "0" + minsTo;
}
var collDiv = '<div class="added" data-theme="c" data-role="collapsible" id='+hoursFrom+minsFrom+hoursTo+minsTo+' data-collapsed="true"><h3 id="results-header">'
+ hoursFrom
+ ":"
+ minsFrom
+ " - "
+ hoursTo
+ ":"
+ minsTo
+ '<img style="height:15px;width:15px;margin-left:30px;" class="checkOrCross" id='
+hoursFrom
+minsFrom
+hoursTo
+minsTo
+' src="pics/cross.png" /></h3>'
+ textProjectName
+ textProjectData
+ '</div>';
$('.spanTimetable').append(collDiv);
timespan.setMinutes(timespan.getMinutes() + selectedValue);
}
HTML-&GT;&GT;
<div data-role="page" id="MSchedule">
<header data-role="header">
<h4>Schedule</h4>
</header>
<div data-role="content" id="content" style="width: 100%">
<div class="ui-block-c" id="blockC" style="width: 100%">
<div id="spanNav">
<div class="spanNav-rowTimetable" id="spanNav-row1">
<select name="timeDropList" id="timeDropList">
<option value="6">6 Minutes</option>
<option value="10">10 Minutes</option>
<option value="15">15 Minutes</option>
<option value="30">30 Minutes</option>
<option selected value="60">1 Hour</option>
<option value="Vac">Vacation</option>
</select>
</div>
</div>
<div id="timetable" data-role="collapsible-set"
class="spanTimetable"></div>
</div>
</div>
答案 0 :(得分:1)
var collapsibleID = '#'+$('.added').parent('spanTimetable').attr('id');
var pictureID = '#'+$('.checkOrCross').attr('id');
什么是'#'+$
,你想要达到什么目标?
此时我并不那么敏锐,但请尝试:
var collapsibleID = '#'+($('.added').parent('.spanTimetable').attr('id'));
var pictureID = '#'+($('.checkOrCross').attr('id'));
它有什么不同吗?
尝试:
$('input.projectName, input.projectEntry').keydown(function(){
var $wrapper = $(this).parents('.added'),
$projectName = $wrapper.find('input.projectName'),
$projectEntry = $wrapper.find('input.projectEntry');
if($projectName.val().length > 0 && $projectEntry.val().length > 0){
$wrapper
.find('img.checkOrCross')
.attr('src' , 'pics/check.png');
}
});