在jQuery对象上使用时，innerHTML无法正常工作

此代码未按预期工作。 它没有在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，没有按预期添加其他类。

 
 **Tuesday**  

为什么不显示这一天？

为什么节目/隐藏不起作用？

 $('.less').on('click', function(e) { $('#showMore').show(); $('#showLess').hide(); }); $('.more').bind('click', function(e) { $('#showLess').show(); $('#showMore').hide(); }); 

Answer 1

您正在尝试在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

Answer 2

因为.innerHTML不是jquery函数。 您可以使用.html（）来实现您想要做的事情。 或者，如果你真的想使用.innerHTML，你可以使用.get（）来获取实际的DOM元素， 然后使用.innerHTML但是…我不推荐它。

我相信这个编辑过的小提琴解决了你的问题。 相关代码：

 $('#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) { //... 

Answer 3

除了Sushanth所说的，你还试图在javascript对象上调用jQuery方法。

 item.addClass 

应该

 $(item).addClass