Question

我有这个问题，我需要能够在html元素内部更改html。

我有这个按钮正在用data-*更新他的html，当我向下滚动显示Load More的页面时，滚动它会显示一个gif <img id="img-loading" src="assets/img/loading-2.gif" width="170" height="113">，然后再显示Load More 1}}直到有项目。

我可以在gif可见时捕获，然后他的父div不应该有css边框。

<div class="tg-ajax-button tg-nav-color tg-nav-border tg-nav-font" data-item-tt="119" data-button="Load More" data-loading="<img id=&quot;img-loading&quot; src=&quot;assets/img/loading-2.gif&quot; width=&quot;170&quot; height=&quot;113&quot;>" data-no-more="No more item" data-remain="" style="color: rgb(228, 229, 230);">
<span class="tg-nav-color sp-btn-gray" style="color: rgb(228, 229, 230);">Load More</span>
</div>

我已尝试在html上使用jQuery change()：

$('.tg-ajax-button .tg-nav-color').html().change(function() {
  alert('changed');
});

但它没有用。

提前致谢

我的解决方案：

我使用的是Wordpress插件＆＃34; The Grid＆＃34;使用AJAX请求加载网格中的元素。要添加gif而不是文本，我使用jQuery html()来更改按钮内的html .ajaxSend()

$(document).ajaxSend(function(){
    if ($('test').hasClass('img-loading')){
      $('test').html('<img id="img-loading" class="img-loading" src="http://www.h-57.com/test/wp-content/themes/jupiter-child/assets/img/loading-2.gif" width="170" height="113">');
      $('test').parent('span').attr('style',  'border-color: transparent !important');
    }
});

现在一切正常，但我觉得它很乱，所以如果有人有更好的想法，请告诉我。感谢

Answer 1

将click事件附加到元素。当用户点击按钮时，输出＆＃34; Hello World＆＃34;在

元素中，id =＆＃34; demo＆＃34;：根据您的需要使用代码

＆＃13;

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

＆＃13;

希望这会有所帮助：D

Answer 2

似乎你想要一个类似的功能：页面滚动到底部，然后加载更多数据。

它可以分为两部分：

当页面滚动到底部，然后启动ajax
在ajax之前，将“LOAD MORE”更改为“LOADING IMG”，在ajax之后，将其更改回来

代码如下：

$(window).on('scroll', function(){
     if( scrollToBottom ) {
         loadData();
     }
})

function loadData() {
    $.ajax({
      ...
      beforeSend: function(){ 
         // change 'LOAD MORE' to 'LOADING IMG'
      },
      complete: function() {
        // change 'LOADING IMG' to 'LOAD MORE'
      }
    })
}

在元素

2 个答案: