如何从标签获取类名

问题描述 投票:0回答:2

我想在每次按下按钮时更改<a>颜色和<span>文本。我需要在data == '0'

中添加一些内容
<div class="submitset uncheck">
  <a class="btncolor--blue bt_register" href="<?php echo '/advertiser/campaign/' ?>">
    <span class="stop_offer">Start</span>
  </a>
</div>
jQuery(document).ready(function($) {
  //案件を登録する
  jQuery('.bt_register').click(function() {
    var link = jQuery(this);
    var params = link.attr('href').split('/');

    jQuery.get(link.attr('href'), function(data) {
      console.log($('#sidebar div:eq(14)').attr('class'));
      if (data == '0') {
        link.find('span').text('Start');
        link.attr('class', 'btncolor--red bt_register');
      } else {
        link.find('span').text('Stop');
        link.attr('class', 'btncolor--blue bt_register');
      }
    });
    return false;
  });
});
javascript jquery html tags
2个回答
2
投票

如果您还没有找到解决方案,请显示许多可能的解决方案之一:

jQuery(document).ready(function($) {
	let data = 1;
  jQuery('.bt_register').click(function() {
    let link = jQuery(this);
		
      if (data % 2 == 0) {
        link.find('span').text('Start');
        link.removeClass("btncolor--blue")
        link.addClass("btncolor--red");
        
      } else {
        link.find('span').text('Stop');
        link.removeClass("btncolor--red")
        link.addClass("btncolor--blue");
      }
      data++;
      return false;
  });
});
.bt_register {
  color: white;
  padding: 20px;
}
.btncolor--blue{
  background-color: blue;
}
.btncolor--red {
  background-color: red;

}

或更短的解决方案:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="submitset uncheck">
  <a class="btncolor--blue bt_register" href="#">
    <span class="stop_offer">Start</span>
  </a>
</div>

1
投票

您可以尝试以下方法:

jQuery(document).ready(function($) {
  let data = 1;
  jQuery('.bt_register').click(function() {
    let link = jQuery(this);

    if (data % 2 == 0) {
      link.find('span').text('Start');
    }  else {
      link.find('span').text('Stop');
    }
    link.toggleClass("btncolor--red")
    data++;
    return false;
 });
});
© www.soinside.com 2019 - 2024. All rights reserved.