This代码未按预期工作。它没有在span.day内显示任何文本,它应该显示今天的日期(写作时的星期二)。它也没有在$.each
回调中添加类“currentDay”。
$('#showLess span.day').innerHTML=weekday[today];
$.each($('#showMore p span.day'), function(index, item) {
if(typeof item.innerHTML != 'undefined')
{
alert('item.text:' +item.innerHTML);
alert('weekday[today]'+item.innerHTML.indexOf(weekday[today]));
if(item.innerHTML.indexOf(weekday[today])!=-1) {
alert("check which element has added class currentDay:");
item.addClass('currentDay');
}else{
if(item.hasClass('currentDay')) {
item.removeClass('currentDay');
}
}
}
});
.innerHTML
未更改HTML,因此未按预期添加其他类。
<p id="showLess" class="less">
<span class="day">**Tuesday**</span>
</p>
为什么不显示这一天?
为什么节目/隐藏不起作用?
$('.less').on('click', function(e) {
$('#showMore').show();
$('#showLess').hide();
});
$('.more').bind('click', function(e) {
$('#showLess').show();
$('#showMore').hide();
});
答案 0 :(得分:4)
您正在尝试在jQuery对象上调用JS属性。
例如innerHTML
你正试图在jQuery对象上调用它。
$('#showLessHours span.day').innerHTML
应该是
$('#showLessHours span.day')[0].innerHTML
或强>
$('#showLessHours span.day').html(weekday[today]);
在您的each loop
项中是一个JS对象,您正在尝试使用jQuery添加一个类。首先将其转换为jQuery对象。
item.addClass('currentDay');
item.removeClass('currentDay');
应该是
$(item).addClass('currentDay'); or $(this).addClass('currentDay');
$(item).removeClass('currentDay'); or $(this).removeClass('currentDay')
相反,您可以在回调中使用$(this)
而不是$(item)
对象,因为它们都引用相同的对象。
另一个小建议是,为什么在包含jQuery时想要混合使用vanilla JS和jQuery,并希望在应用程序中使用它。
<强> jsFiddle 强>
答案 1 :(得分:1)
因为.innerHTML不是一个jquery函数。您可以使用.html()来实现您的目标。或者,如果您真的想使用.innerHTML,您可以使用.get()来获取实际的DOM元素,然后然后使用.innerHTML但是...我不推荐它
我相信this edited fiddle可以解决您的问题。相关代码:
$('#showLessHours span.day').html(weekday[today]);
//...
if(item.html() != '') {
alert('item.text:' +item.text());
alert('weekday[today]'+item.text().indexOf(weekday[today]));
if(item.html().indexOf(weekday[today])!=-1) {
//...
答案 2 :(得分:0)
除了Sushanth所说的,你还试图在javascript对象上调用jQuery方法。
item.addClass
应该通过
$(item).addClass