在jQuery對象上使用innerHTML時無法正常工作

Question

此代碼無法正常工作。 它沒有在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的情況下混合使用普通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