Question

我正在尝试将类添加到按钮标记内。

所以最初我有一个这样的提交按钮：

<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning"><span id="sid"></span> Submit</button>

接下来我有一个点击功能，我尝试了不同的方法来添加类来扩展它但没有一个工作，我评论说这些不起作用：

    $("#sbtn").click(function(e) { 
            $(this).html(' Loading ...');
        //  $(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
        //  $(".btn.btn-lg.btn-warning>span").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
       // $("#sid").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
       // $("button.btn.btn-lg.btn-warning span").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');

    });

知道如何添加课程以便让我到达下面吗？

<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading ...</button>

Answer 1

问题在于使用

$(this).html('Loading ...');你从按钮内部删除了跨度，所以...试图找到它并给它一个类是没用的，因为它不再存在，因为你改变了按钮的html

所以有一些解决方案

1。在span

中添加html()

＆＃13;

$("#sbtn").click(function(e) { 
            $(this).html(' <span></span>Loading ...');
       $(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
      
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning">
<span id="sid"></span> Submit</button>

＆＃13;

2 。您可以将跨度与其类一起添加，而不是使用addClass。但这是一个混乱的解决方案

＆＃13;

$("#sbtn").click(function(e) { 
            $(this).html('<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>Loading ...');

      
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning">
<span id="sid"></span> Submit</button>

＆＃13;

Answer 2

Please try the following with your code. It may work for you

View in jsFiddle : https://jsfiddle.net/fz2hq3gk/

在HTML中：

<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning"><span id="sid"></span> <p id="chnagetext">Submit</p></button>

在剧本中：

    $("#sbtn").click(function(e) { 
            $("#chnagetext").html(' Loading ...');
$(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
$(".btn.btn-lg.btn-warning>span").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
$("#sid").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
$("button.btn.btn-lg.btn-warning span").addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');

    });

Answer 3

您需要在span中找到ID为sid的{{1}}，如下所示，

button

Answer 4

由于您的代码$(this).html(' Loading ...');，按钮标记的范围和文本都被替换为＆＃34;正在加载..＆＃34;

因此，仅使用$(this).get(0).lastChild.nodeValue = 'Loading ...';代码，将替换按钮标记的文本部分，并且将添加使用范围中的$(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');代码类。

请查看以下工作片段。

＆＃13;

$("#sbtn").click(function(e) { 
  $(this).get(0).lastChild.nodeValue = 'Loading ...';
  $(this).find('span').addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="sbtn" name="submit" class="btn btn-lg btn-warning"><span id="sid"></span> Submit</button>

＆＃13;

Answer 5

使用此：

$("#sbtn").click(function(e) {
  var spn = $(this).find('span').clone();
  spn.addClass('glyphicon glyphicon-refresh glyphicon-refresh-animate');
  $(this).html(spn + ' Loading ...');
});

在jquery中将class添加到按钮标记内

5 个答案: