用于 jQuery 对象时，innerHTML 无法正常工作答案

【问题标题】：innerHTML not working properly when used on a jQuery object用于 jQuery 对象时，innerHTML 无法正常工作
【发布时间】：2015-08-04 18:59:31
【问题描述】：

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

【问题讨论】：

小提琴很好，但在这里发布代码。
@Amy 我会去看看：github.com/eorroe/NodeList.js

标签： javascript jquery innerhtml

【解决方案1】：

您正在尝试在 jQuery 对象上调用 JS 属性。

例如innerHTML

你正试图在一个 jQuery 对象上调用它。

$('#showLessHours span.day').innerHTML

应该是

$('#showLessHours span.day')[0].innerHTML

或

$('#showLessHours span.day').html(weekday[today]);

在您的each loop item 中是一个 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

【讨论】：

为什么p 有 <a href="#" class="hours-more"> (show)</a>  show-less 和 show-more 类。它会触发这两个事件。
出于某种原因，这仍然不适合我。我按原样复制了代码，它在小提琴/单独页面中工作，但当我尝试将其添加到 Angular.js 中的工厂/服务时却不行......
我应该把它放在 document.onReady 还是 window.onLoad

【解决方案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) {
//...

【讨论】：

【解决方案3】：

除了 Sushanth 所说的之外，您还尝试在 javascript 对象上调用 jQuery 方法。

item.addClass

应该由

$(item).addClass

【讨论】：