在jQuery对象

Question

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();
        });

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但是...我不推荐它

我相信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) {
//...

Answer 3

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

item.addClass

应该通过

$(item).addClass